简单易实现的水平居中垂直居中方法

Posted 2020-09-02 夜窗听雨

在页面布局中，经常会面临垂直水平居中问题。网络上有很多方法，但是大多数情况下，我们找到合适的解决方法后，复制粘贴了事，并没有对各种方法的原理、利弊进行研究。本着“双鸟在林，不如一鸟在手”的宗旨，从各种方法中找出一种简单易懂的方法，让大家一目了然，以后再遇到也能立即想出来。
1、水平居中：
使div02在div01中水平居中。
```
<div id="div01">
<div id="div02"></div>
</div>
```
```
#div02 {
width: 200px;
height: 200px;
border: 1px solid red;
background: #fc0;
margin: 0 auto;
}
```
原理： 首先，div02作为块级元素会充满div01，即二者宽度相等。如果div02在div01中居中，那么div02的宽度应小于div01的宽度，所以应先设置好div02的宽度（width: 200px;）。设置好宽度后，利用元素的左右外边距使其水平居中。当div02居中时，两侧的外边距应相等，所以设置左右外边距为auto（margin: 0 auto;），div02会自动计算左右外边距使自己居中。

2、垂直居中
使div02在div01中垂直水平居中。
```
<div id="div01">
<div id="div02"></div>
</div>
```
```
#div01 {
width: 100%;
height: 500px;
border: 1px solid green;
position: absolute;
}
#div02 {
width: 200px;
height: 200px;
border: 1px solid red;
background: #fc0;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
```
原理：使用绝对定位（position: absolute）结合负外边距实现。定位之前设置好div02的尺寸，再对div02相对于div01左上角进行绝对定位（前提是其父元素div01设置position:absolute;），top:50%;left:50%，此时div02的左上角处于div01中心，而不是div02垂直水平居中，需要用负外边距进行调节。将marjin-top设置为div02的height的一半的负值（- height/2），将marjin-left设置为div02的width的一半的负值（- width/2），即是将div02的中心向div01的中心移动，二者重合后div02也就垂直水平居中了。
这种方法是水平居中、垂直居中两种效果同时实现，也可以根据需要实现某一种效果。