关于垂直居中的几个发现我想大家都知道很多垂直居中的方法，今天我在看的时候思考了一下，为什么垂直居中的代码是这么写的，先看

我想大家都知道很多垂直居中的方法，今天我在看的时候思考了一下，为什么垂直居中的代码是这么写的，先看这个。

div {
	position: absolute;
	width: 300px;
	height: 300px;
	margin: auto; /* 这一步很关键 */
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: pink;	/* 方便看效果 */
}

你们说为啥这里要四个方位全为0。之前我还真没想过这个问题，看了一些MDN文档加上自己的一些实验，我发现这四个值是设置在定位元素的的包含块边界和定位元素margin之间的值。而absolute元素的包含块还挺复杂的，具体可以去看官方文档或者《CSS世界》，不过包含块的边界一直是padding box。

黄色区域是margin，而他的左侧是left：200px。

再来看一个。

.container {
    line-height: 200px;
    width:200px
    text-align: center;
    background-color: apua; 
}
.container div {
    display: inline-block; 
    height: 80px; 
    background-color: yellow;
    vertical-align: middle;
    width: 100px;
}

这里必须带inline，单纯的block或者table都不行，为啥？我们都知道拥有inline-block属性的元素都有两个盒子，一个外部盒子inline，一个内部盒子block。那么这里为啥一定要带inline呢？看看截图和html代码，瞬间清晰。

<div class="container">
    <div></div>XXX
 </div>

因为外部容器有固定行高，那么它的行高所形成的行距就会对内联元素起作用。如果这里的外部容器不是设定line-height，而是设置height，那么内部盒子将会升到容器顶部。还有这个外部容器里面最好不要写字，不然由于vertical-align:middle的设置，外部容器高度会增加。另外说一句，内部div里是写不了字的，如果改成line-height就可以，效果还是不错的。

还有就是如果内部的div换成span，不用设置inline-block。当然height也就不起作用。所以很多时候line-height很有用。

一点小体会，仅供参考。