对付元素的程度居中，我按照我本身之前的一些学习来进行一些总结，如果有不同错误的处所，欢迎斧正~

一、让巨细不固定的元素垂直居中

因为：表格的单元格的出格属性：垂直居中等；
`div.parent {

display: table-cell; vertical-align: middle; height: 200px;

}
div.parent img{
}`

属性line-height的设置
`div.parent{

height: 100px; line-height:100px;

}
div.parent img{

vertical-align:middle;

}`

绝对定位 + margin:auto;
div.parent{

height: 300px; width: 300px; position: relative; background-color: red;

}
div.parent img{

position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;

}
ps.第三种要领我很久以前也有用过，一开始我简单的认为是：由于上下摆布都设置为0了所以 margin auto后元素自适应居中，于是某一天我看到了张鑫旭大大的博客才就知道了为什么：引用张大大的话：

1.当一个绝对定位元素，其对立定位标的目的属性同时有具体定位数值的时候，流体特性就产生了;
2.因为left/right同时存在，所以宽度自适应于包罗块的padding box宽度，也就是跟着包罗块padding box的宽度变革，包罗块宽度也会随着一起变。具有流体特性绝对定位元素的margin:auto的填充法则和普通流体元素一模一样：
如果一侧定值，一侧auto，auto为残剩空间巨细；如果两侧均是auto, 则等分残剩空间；

二、巨细固定的元素垂直居中

对付巨细固定的元素，上面的几个要领也是可以用的。

1.绝对定位 + margin:-元素的 宽度&&高度

div.parent{ height: 200px; width: 200px; position: relative; background-color: red; } div.parent img{ width: 100px; height: 100px; position: absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; } //定位额度时候以元素的右上角为参考点，所以我们需要负值的margin把相差的元素的一半的宽高巨细的距离拉回来

对付固定宽高的还有其它很多要领啦，我就不一一列举了。

之前看了张大大的博客,总结一下我对line-height 和 vertical-align的一些认知 。vertical-align 的几个属性值baseline，bottom，top，middle 等跟文字的基线相关联，而line-height 是无论巨细都与文字垂直居中的，好比line-height与高度一致可以设置文字居中，所以，一样的原理，vertical-align 跟line-height 可以联手设置垂直居中。

我感受在网页的构造中，，如果呈现任何难理解的奇怪的现象，都可以先从 line-height 和vertical-align 上排除.

以上是我的学习总结，但愿大家对峙，加油，你不是一小我私家在格斗。

站在巨人的肩膀上学习，再次感谢张大大阮大大的各类分享。