Css實現元素的垂直居中


前言:

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

 

一、文字的垂直居中

1、單行文字

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

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 }

運行結果:

 

二、圖片的垂直居中

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 }

運行結果:

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 }

運行結果:

這里的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 }

運行結果:

 

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 }

運行結果:

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

運行結果:

這種方式和第二種類似,只是用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 }

運行結果:

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 }

運行結果:

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 }

運行結果:

通過絕對定位到50%的位置,再轉換自己高度寬度50%的負距離來實現居中顯示。

然而萬能的方法並不萬能,transform在IE9及其以下是不支持的,大家節哀。

 

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

簡單介紹了10種圖片的的居中方法,有沒有覺得有所感悟,媽媽再也不用擔心我不會元素居中了。

 

以上

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com