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;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);}