忽然發現自己已經有段時間沒有好好的複習下css布局了，有點慚愧啊~於是打算總結一下關於css垂直居中的7種方法。
設定行高(line-height)
在css中，line-height 屬性設定兩段段文字之間的距離，也就是行高，如果我們把一段文字的line-height設定為父容器的高度就可以實現文字垂直居中了。這種方式適用於單行的「行內元素」。將line-height設成和父容器高度一樣的數值，內容中的行內元素就會垂直居中。因為是行高，會在行內元素的上下加上行高的1/2，所以就會垂直居中。想要文字水平居中設定text-align：center即可。
2. 通過偽元素:before實現css垂直居中。
如果想要讓多行元素都能垂直居中，則需要用到偽元素。順便複習一下vertical-align屬性的用法，vertical-align屬性是指元素內的所有元素垂直位置互相垂直，而不是相對於外框高度垂直居中。vertical-align這個是設定元素的垂直排列的.用來定義行內元素的基線相對於該元素所在行的基線的垂直對齊。這時我們可以利用偽元素::before新增乙個div，讓這個偽div的高度達到100%，這樣其他div就可垂直居中了，但div 本身就是塊級元素，而vertical-align是行內元素屬性，則需要修改為inline-block。具體方式是為父元素新增偽元素:before，使得子元素實現垂直居中。
3.已知父元素高度通過transform實現css垂直居中。
可以利用transform這個css3屬性，這時子元素需要相對定位position:relative（相對於其正常（原先本身）位置進行定位），同時搭配bottom這個屬性使用，再通過translatey即可定位到垂直居中的位置。想要子元素水平居中，可以搭配left屬性，再通過translatex即可定位到水平居中的位置。
4. 絕對定位
絕對定位position:absolute,要注意的是設定絕對定位的子元素其父元素position要指定為relative,將上下左右的數值都設定為0，同時margin:auto，但絕對定位會脫離正常文件流，會相互覆蓋，如果內容較多是可能會出現布局問題。
html:
css:
.main
.box1
通過display:flex實現css垂直居中的方法是給父元素display:flex;而子元素align-self:center。
6. calc動態計算
當div的display屬性只能是block時，我們可以用到css的calc動態計算，讓居中的div的top屬性為上方距離是50%的外框高度-50%的居中div高度，即top:calc(50%外框高度-50%居中div高度)。其中父元素position定位為relative，子元素position定位為absolute。水平居中同理。
7. 通過display:table-cell實現css垂直居中。
組合使用display:table-cell和vertical-align、text-align，使父元素內的所有行內元素水平垂直居中。
可以將父元素設定display:table，子元素table-cell會自動撐滿父元素。這就可以做相對於整個頁面的水平垂直居中。
以上就是7種css實現垂直居中的方法總結，希望可以幫到大家！後續還會繼續補充~
CSS的7種常用的垂直居中的方法
1 絕對定位上下百分之五十然後上外邊距做外邊距都是他的寬高的一半 child 2 根據上面的方法有一定的變化，不過也是根據絕對定位 child 3 用於文字且單行，line height要等於父元素高度 div 4 利用display table 與display table cell 注意只有.c...
CSS實現垂直居中的方法
垂直居中是css布局中十分常見的布局效果，在平時的工作中遇到的垂直居中布局大概分為以下的幾類 1，首先是單行文字居中，非常簡單，只需要設定父級元素的高和行高相等，或者設定本身元素為內聯塊或者塊元素，再設定高和行高相等就可以。1 doctype html 2 html 3 head 4 meta ch...
5種實現垂直居中css
在我們製作頁面的時候經常會遇到內容垂直居中的需求，今天分享5種垂直居中的方法，每種方法都有自己的優缺點，可以選擇自己喜歡的方式。以下 都經過本人親自測試。style content style div class content vertical align middle div style con...