方案一
div 绝对定位水平垂直居中【margin:auto 实现绝对定位元素的居中】，
兼容性：,IE7 及之前版本不支持
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| ```
## 方案二
div 绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
```css
div {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
|
方案三
div 绝对定位水平垂直居中【Transforms 变形】
兼容性：IE8 不支持；
1
2
3
4
5
6
7
8
9
| div {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
|
方案四
css 不定宽高水平垂直居中
1
2
3
4
5
6
7
8
9
10
11
| .box {
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.box > div {
background-color: green;
width: 200px;
height: 200px;
}
|
方案五
将父盒子设置为 table-cell 元素，可以使用 text-align:center 和 vertical-align:middle 实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
1
2
3
4
5
| <p class="outerBox tableCell"></p>
<p class="ok"></p>
<p class="innerBox">tableCell</p>
<p></p>
<p></p>
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.tableCell {
display: table;
}
.tableCell .ok {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tableCell .innerBox {
display: inline-block;
}
|
方案六
对子盒子实现绝对定位，利用 calc 计算位置
1
2
3
| <p class="outerBox calc"></p>
<p class="innerBox">calc</p>
<p></p>
|
css
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.calc {
position: relative;
}
.calc .innerBox {
position: absolute;
left: -webkit-calc((500px - 200px)/2);
top: -webkit-calc((120px - 50px)/2);
left: -moz-calc((500px - 200px)/2);
top: -moz-calc((120px - 50px)/2);
left: calc((500px - 200px) / 2);
top: calc((120px - 50px) / 2);
}
|
