css元素垂直居中

1、碎碎念：啊啊啊，原諒我只能起一個醬紫微大衆微俗氣的標題，由於實在沒有什麼能比這樣表達的更清楚直觀了呢！

2、沒有知識儲備，直接上示例：

一、思路：給父元素添加display: table屬性；給子元素添加display: table-cell,而且須要設置vertical-align: middle;（說明：適用於單行，多行文字）

html:

 1 //單行居中
 2 <div class="wapper">
 3     <p class="child">據說白雪公主在逃跑 小紅帽在擔憂大灰狼 據說瘋帽喜歡愛麗絲 醜小鴨會變成白天鵝</p>
 4 </div>
 5 //多行居中
 6 <div class="wapper">
 7     <div class="child">
 8     　　<p>據說白雪公主在逃跑 小紅帽在擔憂大灰狼 據說瘋帽喜歡愛麗絲 醜小鴨會變成白天鵝</p>
 9     　　<p>據說彼得潘總長不大 傑克他有豎琴和魔法 據說森林裏有糖果屋 灰姑娘丟了心愛的玻璃鞋</p>
10     　　<p>只有睿智的河水知道 白雪是由於貪玩跑出了城堡 小紅帽有件抑制本身 變成狼的大紅袍</p>
11     </div>
12 </div>

 

css:

 1 <style type="text/css">
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 body{
 7     font-family: 'microsoft yahei';
 8 }
 9 .wapper{
10     width: 100%; 
11     height: 500px;
12     background-color: #f7f7f7;
13  display: table;
14     text-align: center;
15 }
16 .wapper .child{
17  display: table-cell;
18  vertical-align: middle;
19 }
20 </style>

 

效果圖：

 

二、思路：使用line-height屬性，將文字的行高設置成和父元素同樣高的時候，單行文字會垂直居中（說明：只適用於單行文字）

html同上

css

 1 <style type="text/css">
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 body{
 7     font-family: 'microsoft yahei';
 8 }
 9 .wapper{
10     width: 100%;
11     height: 500px;
12     background-color: #f7f7f7;
13     text-align: center;
14 }
15 .wapper .child{
16  line-height: 500px;
17 }
18 </style>

 

三、思路：利用padding或者margin來實現居中，好比父元素高度不固定，我能夠給子元素設置margin上下邊距相等，或者給父元素設置padding上下相等，便可獲得子元素垂直居中的效果；父元素高度固定的時候，好比上邊的例子，wapper高度爲500px，這時候就須要咱們計算一會兒元素的高度，設置邊距=（父元素高-子元素高）/2，這個獲得的值就是子元素的margin-top值，或是父元素的padding-top值。

html同上

css

 1 <style type="text/css">
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 body{
 7     font-family: 'microsoft yahei';
 8 }
 9 .wapper{
10     width: 100%;
11     height: 500px;
12     background-color: #f7f7f7;
13     text-align: center;
14  overflow: hidden;
15 }
16 .wapper .child{
17  line-height: 1;
18     font-size: 14px;
19  margin-top: 243px;  //（500-14）/2 = 243
20 }
21 </style>

效果：思路就是這個樣子的思路，實際的效果是和咱們預期的有誤差的。因此當給子元素設置margin-top的時候，請給父元素加上overflow:hidden，這個也是css中常見的問題，解決辦法一樣有好幾個，本篇暫不作解釋。本身也能夠用padding試一下哦~

 

四、思路：利用position: absloute（絕對定位）。其實這個方法和用邊距的辦法差很少，只不過實現形式不一樣。首先咱們須要知道子元素的高度，而後給這個元素定位在父元素垂直居中的位置上。也是分兩種狀況：一是父元素高度未知，咱們能夠用top： 50%，margin-top: -(子元素的高度/2)來實現；二是父元素高度已知，直接top = （父元素高-子元素高）/2，這個方法實際上就是3的另外一種實現，原理一致；

html同上

css

 1 <style type="text/css">
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 body{
 7     font-family: 'microsoft yahei';
 8 }
 9 .wapper{
10     width: 100%;
11     height: 500px;
12     background-color: #f7f7f7;
13     text-align: center;
14  position: relative;
15 }
16 .wapper .child{
17  position: absolute;
18  width: 100%;
19     font-size: 14px;
20     line-height: 1;
21  top: 50%;
22  margin-top: -7px; //文字14px 行高1 因此p標籤的高度爲14px
23 }
24 </style>

效果：父元素高度不固定的時候，通常是父元素中有多個子元素，其餘的子元素將父元素撐開，而後某一個子元素設置絕對定位。小例子裏沒有其餘子元素，因此直接設置了父元素的高度，演示一個大概，瞭解下原理。

 

五、思路：使用flex佈局。注意要作一下兼容！

 1 <style type="text/css">
 2 *{
 3     margin:0;
 4     padding:0;
 5 }
 6 body{
 7     font-family: 'microsoft yahei';
 8 }
 9 .wapper{
10     width: 100%;
11     height: 500px;
12     background-color: #f7f7f7;
13     text-align: center;
14  display: -webkit-box;
15  display: -ms-flexbox;
16  display: -webkit-flex;
17  display: flex;
18  -webkit-box-pack: center;
19  -ms-flex-pack: center;
20  -webkit-justify-content: center;
21  justify-content: center;
22  -webkit-box-align: center;
23  -ms-flex-align: center;
24  -webkit-align-items: center;
25  align-items: center;
26
27 }
28 .wapper .child{
29     
30 }
31 </style>

效果：flex雖然使用起來很方便，可是這一堆兼容看起來也是略不爽呢。因此通常垂直居中能用前幾種方法解決的，我也不多用flex（我的習慣）。

---------------------------------------------------------2017.02.16----------------------------------------------------------------------------------------------

六、羣裏的小夥伴給出了另外的一種方法，也是利用了position: absolute;

<div style="width: 50px; height: 50px; background-color: red;position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin:auto"></div>

 

 

總結：有錯誤歡迎指出，互相學習~over！