在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。
方法一:
绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
图片展示：
代码如下：
|
1
2
3
4
5
6
7
|
div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%);} |
方法二:
绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值
图片展示： 如方法一的图片展示
代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
div{ width:600px; height: 600px; background:red; position: absolute; left:50%; top:50%; margin-left:-300px; margin-top:-300px;} |
方法三：
绝对定位方法：绝对定位下top left right bottom 都设置0
图片展示： 如方法一的图片展示
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--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样式
展示图如下：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--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组合使用
展示图如下：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
<!--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() 函数动态计算实现水平垂直居中
展示图如下：
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!--html--><div class="calc"> <div class="child">calc</div></div>/**css**/.calc{ position: relative;<br> border: 1px solid #ccc;<br> width: 400px;<br> height: 160px;}.calc .child{ position: absolute;<br> width: 200px;<br> 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);} |