Css實現元素的垂直居中

前言：

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

 

1、文字的垂直居中

一、單行文字

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

二、多行文字

咱們能夠把多行的文字當作圖片來處理，用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 }

運行結果：

 

2、圖片的垂直居中

一、經過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 }

運行結果：

二、經過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 }

運行結果：

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

三、背景圖定位的方法

<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屬性讓它居中。

四、經過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 }

運行結果：

 

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

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

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

五、利用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 }

運行結果：

惋惜IE10以前的版本是不支持的，你們自行嘗試

六、利用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 }

運行結果：

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

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

<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  }

運行結果：

opacity:0  //透明不顯示可是佔位

八、在已知圖片高度的狀況下藉助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 }

運行結果：

九、藉助絕對定位

<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 }

運行結果：

十、主角最後登場----萬能的居中方式(絕對定位加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 }

運行結果：

經過絕對定位到50%的位置，再轉換本身高度寬度50%的負距離來實現居中顯示。

然而萬能的方法並不萬能，transform在IE9及其如下是不支持的，你們節哀。

 

關於水平居中文字能夠用text-align:center,塊級元素能夠用margin: 0 auto;之類的實現，比較簡單就很少說了。

簡單介紹了10種圖片的的居中方法，有沒有以爲有所感悟，媽媽不再用擔憂我不會元素居中了。

 

以上