大家好，我是IT修真院深圳分院第02期學(xué)員，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)css任務(wù)08，深度思考中的知識點——CSS有哪些方式可以實現(xiàn)垂直居中？
1.背景介紹
在前端開發(fā)過程中，盒子居中是常常用到的。其中 ，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設(shè)置元素的margin: 0 auto就可以實現(xiàn)。但是垂直居中相對來說是比較復(fù)雜一些的。
2.知識剖析
垂直居中就是豎向居中
下面我們一起來討論一下實現(xiàn)垂直居中的方法。
3.常見問題
css有哪些方式可以實現(xiàn)垂直居中？
4.解決方案
1、單行文本垂直居中方法
該方式適用于情況比較簡單的單行文本，只需要簡單地把 line-height 設(shè)置為那個對象的 height 值就可以使文本居中了。
2、多行文本垂直居中方法
2.1父級元素display:table-cell，vertical-align:middle；
2.2多行內(nèi)容居中，且容器高度可變，也很簡單，給出一致的 padding-bottom 和 padding-top ；
3、DIV垂直居中：INLINE-BLOCK
給元素設(shè)置dispaly：inline-block配合vertical-align：middle來垂直居中
4、DIV垂直居中：絕對定位之MARGIN：AUTO
父元素相對定位，子元素絕對定位。 子元素的上下左右均設(shè)置0定位且設(shè)置margin：auto
5、DIV垂直居中：絕對定位之負(fù)值法
已知元素高度后，使用絕對定位將top設(shè)置為50%，margin-top設(shè)置為內(nèi)容高度的一半(height + padding) / 2的負(fù)值；內(nèi)容超過元素高度時需要設(shè)置overflow決定滾動條的出現(xiàn)；top：50%元素上邊界位于包含框中點，設(shè)置負(fù)外邊界使得元素垂直中心與包含框中心重合；
6、DIV垂直居中：絕對定位之TRANSLATE
CSS3的興起，使得垂直居中有了更好的解決方法，就是使用transform代替上一種方法margin. transform中translate偏移的百分比值是相對于自身大小的。
7、DIV垂直居中：FLEX
給父元素設(shè)置display：flex后再設(shè)置align-items: center表示讓子元素垂直居中；
5.編碼實戰(zhàn)
6.擴展思考
使用writing-mode實現(xiàn)垂直居中
取值：
vertical-rl：垂直方向自右而左的書寫方式。
vertical-lr：垂直方向自左而右的書寫方式。
7.參考文獻
參考一：盤點8種CSS實現(xiàn)垂直居中水平居中的絕對定位居中技術(shù)
參考三：改變CSS世界縱橫規(guī)則的writing-mode屬性
8.更多討論
1.還有更多實現(xiàn)垂直居中的方法嗎？
2.怎么實現(xiàn)水平居中？
3.怎么實現(xiàn)水平垂直居中？
9.視頻資料
今天的分享就到這里啦，歡迎大家點贊、轉(zhuǎn)發(fā)、留言、拍磚~
下期不見不散~
