注：以下demo都只是針對現(xiàn)代瀏覽器所做诸老，未兼容低版本的IE以及其他非主流瀏覽器楚昭。

11種實現(xiàn)方式如下：

1.使用絕對定位和負外邊距對塊級元素進行垂直居中
效果：

代碼：

這個方法兼容性不錯司倚，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸祖能，否則無法準確實現(xiàn)垂直居中闲孤。

2.使用絕對定位和transform
代碼如下：

效果：

這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸挪挤，因為transform中偏移的百分比就是相對于元素自身的尺寸而言，當被居中的元素是被自己內(nèi)部元素撐開寬或者高的時候可適用此方法罢浇。

3.絕對定位結(jié)合margin:auto

這種方式的兩個核心是：把要垂直居中的元素相對于父元素絕對定位陆赋，top和bottom設(shè)置為相等的值沐祷，我這里設(shè)置成0了，當然也可以設(shè)置為99999px或者-99999px攒岛，無論什么赖临，只要兩者相等就行。這一一步做完之后再將要居中的元素的margin設(shè)為auto灾锯，這樣就可以實現(xiàn)垂直居中了兢榨。

被居中元素的寬度也可以不設(shè)置，但是不設(shè)置的話顺饮，就必須是圖片這種自身就包含尺寸的元素吵聪，否則無法實現(xiàn)。

4.使用padding實現(xiàn)子元素的垂直居中

這種方式非常簡單领突，就是給父元素設(shè)置相等的上下內(nèi)邊距暖璧，則子元素自然是垂直居中的案怯，自然這個時候父元素是不能設(shè)置高度的君旦，要讓它自動被填充起來，除非設(shè)置了一個正好等于上內(nèi)邊距+子元素高度+下內(nèi)邊距的值嘲碱，否則無法精確地垂直居中金砍。

這種方式看似沒有什么技術(shù)含量，但其實在某種場景下也是非常好用的麦锯。

5.使用flex布局

flex布局（彈性布局/伸縮布局）里門道頗多恕稠，這里先針對用到的東西簡單說一下，想深入學(xué)習(xí)的小伙伴可以去看阮一峰老師的博客扶欣。

flex也就是flexible鹅巍，意思為靈活的，柔韌的料祠，易彎曲的骆捧。

元素可以通過設(shè)置display:flex;將其指定為flex布局的容器，指定好了容器之后再為其添加align-items屬性髓绽，該屬性定義項目在交叉軸（這里是縱向周）上的對齊方式敛苇，可能的取值有五種，分別如下：

flex-start:交叉軸的起點對齊顺呕；flex-end:交叉軸的終點對齊枫攀；

center：交叉軸的中點對齊；baseline項目第一行文字的基線對齊株茶；

strech(該值是默認值)：如果項目沒有設(shè)置高度或者設(shè)置為auto来涨，那么將占滿整個容器的高度。

6.彈性布局

這種方式也是給父元素設(shè)置display:flex,設(shè)置好之后改變主軸的flex-direction:column,該屬性可能的取值有四個启盛，分別如下：

row(該值為默認值)：主軸為水平方向扫夜，起點在左端楞泼；

row-reverse，主軸是水平方向笤闯，起點在有端堕阔；

column主軸為垂直方向，起點在上沿颗味；

column-reverse：主軸為垂直方向超陆，起點在下沿。

justify-content屬性定義了項目在主軸上的對齊方式浦马，可能取的值有五個时呀，分別如下（不過具體的對齊方式與主軸的方向有關(guān)，以下的值都是假設(shè)主軸為從左到右的）：

flex-start(該值是默認值)：左對齊晶默；

flex-end:右對齊谨娜；

center:居中對齊；

space-between:兩端對齊磺陡，各個項目之間的間隔均對齊趴梢；

space-around:各個項目兩側(cè)的間隔相等。

7.還有一種在前面已經(jīng)見到過很多次的方式就是使用line-height對單行文本進行垂直居中币他。

這里有一個小坑需要大家注意：line-height（行高）的值不能設(shè)為100%坞靶；我們來看看官網(wǎng)文檔中給出的關(guān)于line-height取值為百分比時候的描述：基于當前字體尺寸的百分比行間距，所以大家就明白了蝴悉，如果是百分比是相對于字體尺寸來講的彰阴。

8.?使用 display：table-cell 和 vertical-align 對容器里的文字進行垂直居中

這里關(guān)于vertical-align啰嗦兩句：vertical-align屬性只對擁有valign特性的html元素起作用，例如表格元素中的<td><th>等等拍冠，而像<div><span>這樣的元素是不行的尿这。

　　valign屬性規(guī)定單元格中內(nèi)容的垂直排列方式，語法：<td valign="value">庆杜，value的可能取值有四種：

　　top：對內(nèi)容進行上對齊

　　middle：對內(nèi)容進行居中對齊

　　bottom：對內(nèi)容進行下對齊

　　baseline：基線對齊

????????關(guān)于baseline值：基線是一條虛構(gòu)的線射众。在一行文本中，大多數(shù)字母以基線為基準欣福。baseline 值設(shè)置行中的所有表格數(shù)據(jù)都分享相同的基線责球。該值的效果常常與 bottom 值相同。不過拓劝，如果文本的字號各不相同雏逾，那么 baseline 的效果會更好。?