摘要：種元素垂直居中根據不同情況，使用的垂直居中方式各異針對塊級元素與行級元素的垂直居中不同。行級元素行內包含特殊元素如果行內包含特殊元素圖片輸入框元素或者粗體使用設置對齊方式即可垂直居中。

根據不同情況，使用的垂直居中方式各異：針對塊級元素與行級元素的垂直居中不同。

如果行內包含特殊元素：圖片、input輸入框、inline-block元素或者粗體

使用verticle-align: middle;設置對齊方式即可垂直居中。text-bottom/text-top 為下對齊/上對齊

兼容性很好：IE4

設置line-height與height值相等，可以實現行級元素或者純文本的塊級元素的垂直居中

兼容性好IE4

設置容器元素display: flex; align-items: center;即可，其內的子元素在容器中垂直居中

缺點： 使用flex布局，并且使用CSS3的align-items屬性，兼容性較差：IE11

設置容器元素display: flex; ，子元素設置align-self: center;

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch

同樣兼容性較差：IE11

父元素設置相對定位position: relative;

子元素設置絕對定位postion: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto;

關鍵在于設置top: 0; left:0; bottom: 0; right: 0; margin: auto表示水平、垂直4個方向的margin值都通過計算獲取

兼容性IE7