关于元素垂直居中的那些事

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

一、利用外边距垂直居中

这个方法是把元素外边距设为负值（自身宽高的一半），来实现垂直居中。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{position: relative;border: 1px solid red;width: 400px;height: 400px;margin: 100px auto;}
.main{position: absolute;top: 50%;left: 50%;margin:-50px 0 0  -50px;border: 1px solid black;width: 100px;height: 100px;}

---

二、用margin:auto;居中

给子元素绝对定位以后，上下左右都为0，在设置一个margin为 auto ， 这里一定要是auto。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{position: relative;border: 1px solid red;width: 400px;height: 400px;margin: 100px auto;}
.main{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin:auto;border: 1px solid black;width: 100px;height: 100px;}

---

三、用CSS3垂直居中

这个办法先给父级相对定位，在给子元素绝对定位然后利用CSS3的平移效果使元素垂直居中。也是非常方便的。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{position: relative;border: 1px solid red;width: 400px;height: 400px;margin: 100px auto;}
.main{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border: 1px solid black;width: 100px;height: 100px;}

---

四、用行内块居中

用CSS2的内容就可以垂直居中，这个办法兼容性好，大部分浏览器都已经支持，给两个子元素行内快垂直居中，然后给一个元素宽度为0，高度100%，在给父级一个文本居中。就可以实现让元素在内部垂直居中。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{border: 1px solid red;width: 400px;height: 400px;margin: 100px auto;text-align: center;}
.main{border: 1px solid black;width: 100px;height: 100px;display: inline-block;vertical-align: middle;}
span{width: 0;height:100%;display: inline-block;vertical-align: middle;}

---

五、用弹性盒子居中

给父元素设置为弹性盒子，在主轴居中和垂直交叉轴居中就OK啦。是不是简单方便，但是前提要兼容性好。

html
<div class="box">
    <div class="main"></div>
</div>
css
.box{border: 1px solid red;width: 400px;height: 400px;margin: 100px auto;display: flex;justify-content: center;align-items: center;}
.main{border: 1px solid black;width: 100px;height: 100px;}

---

简单列举了让元素垂直居中的几个方法，都亲测有效，这些方法兼容性都不同因此根据不同环境用不同方法。如果有什么不同方法或者更好意见欢迎私我讨论。

---