大家好杜顺，我是IT修真院北京總院第24期的學(xué)員，一枚正直純潔善良的web程序員
今天給大家分享一下，修真院官網(wǎng)css任務(wù)8经柴，深度思考中的知識(shí)點(diǎn)——用CSS如何實(shí)現(xiàn)垂直居中?
1.背景介紹
在前端開(kāi)發(fā)過(guò)程中挟憔，盒子居中是常常用到的钟些。其中 ，居中又可以分為水平居中和垂直居中绊谭。水平居中是比較容易的政恍，直接設(shè)置元素的margin: 0 auto就可以實(shí)現(xiàn)。但是垂直居中相對(duì)來(lái)說(shuō)是比較復(fù)雜一些的达传。
2.知識(shí)剖析
垂直居中就是豎向居中
下面我們一起來(lái)討論一下實(shí)現(xiàn)垂直居中的方法篙耗。
3.常見(jiàn)問(wèn)題
css有哪些方式可以實(shí)現(xiàn)垂直居中
4.解決方案
1、單行文本垂直居中方法
該方式適用于情況比較簡(jiǎn)單的單行文本宪赶，只需要簡(jiǎn)單地把 line-height 設(shè)置為那個(gè)對(duì)象的 height 值就可以使文本居中宗弯。
2、多行未知高度文字的垂直居中
如果一段內(nèi)容搂妻，它的高度是可變的那么我們可以使用設(shè)定Padding蒙保，使上下的padding值相同即可。同樣的欲主，這也是一種“看起來(lái)”的垂直居中方式邓厕，它只不過(guò)是使文字把div完全填充的一種方式而已逝嚎。
3、多行文本固定高度的居中
vertical-align屬性只會(huì)對(duì)擁有valign特性的(X)HTML標(biāo)簽起作用邑狸，但是在CSS中還有一個(gè)display屬性能夠模擬table懈糯，所以我們可以使用這個(gè)屬性來(lái)讓div模擬table就可以使用vertical-align了。注意单雾，display:table和display:table-cell的使用方法赚哗，前者必須設(shè)置在父元素上，后者必須設(shè)置在子元素上硅堆，因此我們要為需要定位的文本再增加一個(gè)div元素.
4屿储、IE6中垂直居中
Internet Explorer 6 并不能正確地理解display:table和display:table-cell，因此我們可以使用定位來(lái)解決這個(gè)問(wèn)題渐逃。
5够掠、DIV垂直居中：MARGIN：AUTO
父元素相對(duì)定位，子元素絕對(duì)定位茄菊。 子元素的上下左右均設(shè)置0定位且設(shè)置margin：auto
6疯潭、DIV垂直居中：CSS3的transform
CSS3的興起，使得垂直居中有了更好的解決方法面殖，就是使用transform代替上一種方法margin. transform中translate偏移的百分比值是相對(duì)于自身大小的
7竖哩、DIV垂直居中：flex
給父元素設(shè)置display：flex后再設(shè)置align-items: center表示讓子元素垂直居中
8、使用writing-mode實(shí)現(xiàn)垂直居中
writing-mode是CSS3的新特性之一脊僚，使用場(chǎng)景不是很多相叁。這個(gè)屬性主要是改變文檔流的顯示方式。
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
參考一：利用writing-mode實(shí)現(xiàn)元素的垂直居中
參考二：CSS 水平居中辽幌，垂直居中
ppt鏈接：ppt
視頻鏈接：視頻
感謝大家觀看
今天的分享就到這里啦增淹，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)乌企、留言虑润、拍磚~
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始加酵，找個(gè)師兄端辱，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏虽画，學(xué)習(xí)的路上不再迷梦璞危”。
這里是技能樹(shù).IT修真院码撰，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線渗柿，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)朵栖〖樟粒快來(lái)與我一起學(xué)習(xí)吧~
我的邀請(qǐng)碼：12361358，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/12361358
