淺談Css中的元素居中問題_ZenDei技術網路在線

前言：在寫CSS的時候讓元素在高度固定的容器中垂直居中是很簡單的，譬如設置容器的padding或者元素的margin之類的都可以做到；讓元素在容器中水平居中也有text-align:center、margin:0 auto;之類的屬性來幫我們達到目的，但是如何讓元素在不確定高度的容器中垂直居中或者

前言：

在寫CSS的時候讓元素在高度固定的容器中垂直居中是很簡單的，譬如設置容器的padding或者元素的margin之類的都可以做到；讓元素在容器中水平居中也有text-align:center、margin:0 auto;之類的屬性來幫我們達到目的，但是如何讓元素在不確定高度的容器中垂直居中或者行數不確定的文字在高度固定的容器垂直居中呢？下麵我們來討論幾種讓元素垂直居中的方法：

一、文字的垂直居中

1、單行文字

line-height與height高度相同，就可以讓單行文字垂直居中

$XLC`Z{}XF@[@GM$2EQ7~Q_4.png$

2、多行文字

我們可以把多行的文字當做圖片來處理，用span將文字封裝起來，並設置與圖片相同的display屬性（inline-block）,然後用處理圖片垂直居中的方式讓多行文字垂直居中即可。

<div class="wrap">
    <span class="content">
        content<br>
        content
    </span>
</div>

 1 .wrap {
 2     width: 200px;
 3     height: 200px;
 4     line-height: 200px;
 5     background-color: #36AF77;
 6 }
 7 .content {
 8     display: inline-block;
 9     vertical-align: middle;
10     line-height: 15px;
11     font-size: 14px;
12 }

運行結果：

B]$YW[49W$F4{XJ{1TZ{9IM.png

二、圖片的垂直居中

1、通過vertical-align和line-height來實現垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

 1 .wrap {
 2     width: 200px;
 3     height: 200px;
 4     line-height: 200px;
 5     font-size: 0;
 6     background-color: #36AF77;
 7 }
 8 img {
 9     vertical-align: middle;
10 }

運行結果：

~ELQ6}Q2LBM(4)JTWO(MEAO.png

2、通過100%高度的span進行垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt=""><span></span>
</div

 1 .wrap {
 2     width: 200px;
 3     height: 200px;
 4     background-color: #36AF77;
 5 }
 6 img {
 7     vertical-align: middle;
 8 }
 9 span {
10     display:inline-block;
11     height: 100%;
12     vertical-align: middle;
13 }

運行結果：

~ELQ6}Q2LBM(4)JTWO(MEAO.png

這裡的img與一個height:100% 的span同行，使這一行的行高撐滿div。

3、背景圖定位的方法

<div class="wrap">
</div>

1 .wrap {
2     width: 200px;
3     height: 200px;
4     background-color: #36AF77;
5     background-image: url("E:/picture/me.jpg");
6     background-position: center;
7     background-size: 60%;
8     background-repeat: no-repeat;
9 }

這裡將圖片作為容器的背景，通過background-position屬性讓它居中。

4、通過table-cell來實現垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

1 .wrap {
2     width: 200px;
3     height: 200px;
4     background-color: #36AF77;
5     display: table-cell;
6     font-size: 0;
7     vertical-align: middle;
8 }

運行結果：

~ELQ6}Q2LBM(4)JTWO(MEAO.png

W3C上對vertical-align的定義：vertical-align 屬性設置元素的垂直對齊方式。

該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。

在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

5、利用flex彈性佈局實現垂直居中

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

 1 img {
 2     width: 88px;
 3     height: 88px;
 4 }
 5 .wrap {
 6     width: 200px;
 7     height: 200px;
 8     background-color: #36AF77;
 9     display: flex;
10     justify-content: center;
11     align-items: center;
12 }

運行結果：

B~~H_I6MGFO6XYNV~}GG(}9.png

可惜IE10之前的版本是不支持的，大家自行嘗試

6、利用after偽類

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

 1 img {
 2     width: 88px;
 3     height: 88px;
 4 }
 5 .wrap {
 6     width: 200px;
 7     height: 200px;
 8     background-color: #36AF77;
 9 }
10 .wrap:after {
11     content: "";
12     display: inline-block;
13     height: 100%;
14     vertical-align: middle;
15 }
16 img {
17     vertical-align: middle;
18 }

運行結果：

~ELQ6}Q2LBM(4)JTWO(MEAO.png

這種方式和第二種類似，只是用after偽類生成的元素代替了span元素而已。

7、在已知圖片高度的情況下藉助額外的塊級元素

<div class="wrap">
    <div class="temp"></div>
    <img src="E:/picture/me.jpg" alt="">
</div

 1 img {
 2     width: 88px;
 3     height: 88px;
 4 }
 5 .wrap {
 6     width: 200px;
 7     height: 200px;
 8     background-color: #36AF77;
 9 }
10 .temp {
11     height: 50%;
12     margin-bottom: -44px;
13     opacity:0;
14 }

運行結果：

~ELQ6}Q2LBM(4)JTWO(MEAO.png

opacity:0 //透明不顯示但是占位

8、在已知圖片高度的情況下藉助margin-top負邊距

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

 1 img {
 2     width: 88px;
 3     height: 88px;
 4 }
 5 .wrap {
 6     position: relative;
 7     width: 200px;
 8     height: 200px;
 9     background-color: #36AF77;
10 }
11 img {
12     position:absolute;
13     top: 50%;
14     left:0;
15     right:0;
16     margin:auto;
17     margin-top: -44px;
18 }

運行結果：

9、藉助絕對定位

<div class="wrap">
    <img src="E:/picture/me.jpg" alt="">
</div>

 1 .wrap {
 2     position: relative;
 3     width: 200px;
 4     height: 200px;
 5     background-color: #36AF77;
 6 }
 7 img {
 8     position:absolute;
 9     top:0;
10     bottom:0;
11     left:0;
12     right:0;
13     margin:auto;
14 }

運行結果：

B~~H_I6MGFO6XYNV~}GG(}9.png

10、主角最後登場----萬能的居中方式(絕對定位加transform)

<div class="wrap">
    <img class="center" src="E:/picture/me.jpg" alt="">
</div>
<div class="wrap">
    <img class="vertical-center" src="E:/picture/me.jpg" alt="">
</div>
<div class="wrap">
    <img class="horizon-center" src="E:/picture/me.jpg" alt="">
</div>

 1 .center {
 2     left: 50%;
 3     top: 50%;
 4     position: absolute;
 5     -webkit-transform: translate3D(-50%,-50%,0);
 6     -ms-transform: translate3D(-50%,-50%,0);
 7     -moz-transform: translate3D(-50%,-50%,0);
 8     -o-transform: translate3D(-50%,-50%,0);
 9     transform: translate3D(-50%,-50%,0);
10     z-index: 100;
11 }
12 .vertical-center {
13     top: 50%;
14     position: absolute;
15     -webkit-transform: translateY(-50%);
16     -ms-transform: translateY(-50%);
17     -moz-transform: translateY(-50%);
18     -o-transform: translateY(-50%);
19     transform: translateY(-50%);
20     z-index: 100;
21 }
22 .horizon-center {
23     left: 50%;
24     position: absolute;
25     -webkit-transform: translateX(-50%);
26     -ms-transform: translateX(-50%);
27     -moz-transform: translateX(-50%);
28     -o-transform: translateX(-50%);
29     transform: translateX(-50%);
30     z-index: 100;
31 }
32 .wrap {
33     position: relative;
34     width: 200px;
35     height: 200px;
36     margin-bottom: 10px;
37     background-color: #36AF77;
38 }