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

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

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

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

兼容性很好：IE4

設(shè)置line-height與height值相等，可以實(shí)現(xiàn)行級(jí)元素或者純文本的塊級(jí)元素的垂直居中

兼容性好IE4

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

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

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

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

同樣兼容性較差：IE11

父元素設(shè)置相對(duì)定位position: relative;

子元素設(shè)置絕對(duì)定位postion: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto;

關(guān)鍵在于設(shè)置top: 0; left:0; bottom: 0; right: 0; margin: auto表示水平、垂直4個(gè)方向的margin值都通過計(jì)算獲取

兼容性IE7