div⽔平垂直居中的六种⽅法
在平时，我们经常会碰到让⼀个div框针对某个模块上下左右都居中（⽔平垂直居中），其实针对这种情况，我们有多种⽅法实现。
⽅法⼀:
  绝对定位⽅法：不确定当前div的宽度和⾼度，采⽤ transform: translate(-50%,-50%); 当前div的⽗级添加相对定位（position: relative;）  图⽚展⽰：
  代码如下：
div{
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
⽅法⼆:
  绝对定位⽅法：确定了当前div的宽度，margin值为当前div宽度⼀半的负值
  图⽚展⽰：如⽅法⼀的图⽚展⽰
  代码如下：
div{
width:600px;
height: 600px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-300px;
}
⽅法三：
  绝对定位⽅法：绝对定位下top left right bottom 都设置0
  图⽚展⽰：如⽅法⼀的图⽚展⽰
  代码如下：
<!--html-->
<div class="child">我是⼦级</div>
/**css**/
div.child{
width: 600px;
height: 600px;
background: red;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
⽅法四:
  flex布局⽅法：当前div的⽗级添加flex css样式
展⽰图如下：
  代码如下：
<!--html-->
<div class="box">
<div class="child">child</div>
</div>
/**css**/
.box{
height:800px;
-webkit-display:flex;
display:flex;
-webkit-align-items:center;
align-items:center;
-webkit-justify-content:center;
justify-content:center;
border:1px solid #ccc;
}
div.child{
width:600px;
height:600px;
background-color:red;
}
⽅法五:
  table-cell实现⽔平垂直居中: table-cell middle center组合使⽤展⽰图如下：
代码如下：
<!--html-->
<div class="table-cell">
<p>我爱你</p>
</div>
/**css**/
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
css实现垂直水平居中
width: 240px;
height: 180px;
border:1px solid #666;
}
⽅法六:
  绝对定位：calc() 函数动态计算实现⽔平垂直居中  展⽰图如下：
  代码如下：
<!--html-->
<div class="calc">
<div class="child">calc</div>
</div>
/**css**/
.calc{
position: relative;
border: 1px solid #ccc;
width: 400px;
height: 160px;
}
.calc .child{
position: absolute;
width: 200px;
height: 50px;
left:-webkit-calc((400px - 200px)/2);
top:-webkit-calc((160px - 50px)/2);
left:-moz-calc((400px - 200px)/2);
top:-moz-calc((160px - 50px)/2);
left:calc((400px - 200px)/2);
top:calc((160px - 50px)/2);
} 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。