設置圖片元素上下垂直居中的7種css樣式

閱讀(9548) @2018-07-15 14:13:34

圖片、文字左右居中很簡單，只需要以下代碼：

? 1 text-align:center; ?

文字上下居中也很簡單，假設外部div元素的高度是100px，那么：

? 1 line-height:100px; ?

line-height不適用于圖片，想要設置圖片上下居中對齊，代碼如下：

方法一：diaplay:table-cell

HTML部分：

? 1 <div> ? ? 2 ????<img src="http://www.0351zhuangxiu.com/uploads/images/456.jpg" /> ? ? 3 </div> ?

CSS部分：

? 1 div{ ? ? 2 ?????width:1000px; ? ? 3 ?????height:1000px; ? ? 4 ?????border:1px solid red; ? ? 5 ?????text-align:center; ? ? 6 ?????/*以下兩段css代碼就是設置圖片上下對齊*/ ? ? 7 ?????display:table-cell; ? ? 8 ?????vertical-align:middle; ? ? 9 } ?

兼容性：由于display:table-cell的原因，IE6\7不兼容。

解釋一下：

一、display:table-cell屬性簡述：

display:table-cell屬性指讓標簽元素以表格單元格的形式呈現，類似于td標簽。目前IE8+以及其他現代瀏覽器都是支持此屬性的，但是IE6/7只能對你說sorry了，這一事實也是大大制約了display:table-cell屬性在實際項目中的應用。

我們都知道，單元格有一些比較特別的屬性，例如元素的垂直居中對齊，關聯伸縮等，所以display:table-cell還是有不少潛在的使用價值的，雖說IE6/7不支持此屬性，但是幸運的是，IE6/7一些亂糟糟的屬性與渲染，我們可以其他方法實現同樣或是類似的效果。

與其他一些display屬性類似，table-cell同樣會被其他一些CSS屬性破壞，例如float, position:absolute，所以，在使用display:table-cell與float:left或是position:absolute屬性盡量不用同用。設置了display:table-cell的元素對寬度高度敏感，對margin值無反應，響應padding屬性，基本上就是活脫脫的一個td標簽元素了。

一、大小不固定，多行文字的垂直居中：

1、單行文字

可能很多人都知道如何讓單行文字垂直居中顯示，就是使用line-height，將line-height值與外部標簽盒子的高度值設置成一致就可以了。

2、多行文字

如何實現父容器高度固定，文字可能一行，兩行或更多行的垂直居中對齊呢？

實現的關鍵是把文字當圖片處理。用一個span標簽將所有的文字封裝起來，設置文字與圖片相同的display屬性（inline-block屬性），然后用處理圖片垂直居中的方式處理文字的垂直居中即可。

外部div標簽css樣式設置如下：

? 01 div{ ? ? 02 ???width:550px; ? ? 03 ???height:1.14em; ? ? 04 ???padding:0 0.1em; ? ? 05 ???border:4px solid #beceeb; ? ? 06 ???color:#069; f ? ? 07 ???font-size:10em; ? ? 08 ???vertical-align:middle; ? ? 09 ???display:table-cell; ? ? 10 } ?

內部span標簽css樣式設置如下：

? 1 span{ ? ? 2 ???display:inline-block; ? ? 3 ???font-size:0.1em; ? ? 4 ???vertical-align:middle; ? ? 5 } ?

下面這張是實例演示頁面的效果截圖：

方法二：position加margin

? 01 /**html**/ ? ? 02 <div class="wrap"> ? ? 03 ????<div class="center"></div> ? ? 04 </div> ? ? 05 ? ? ? 06 /**css**/ ? ? 07 .wrap { ? ? 08 ????width: 200px; ? ? 09 ????height: 200px; ? ? 10 ????background: yellow; ? ? 11 ????position: relative; ? ? 12 } ? ? 13 .wrap .center { ? ? 14 ????width: 100px; ? ? 15 ????height: 100px; ? ? 16 ????background: green; ? ? 17 ????margin: auto; ? ? 18 ????position: absolute; ? ? 19 ????left: 0; ? ? 20 ????right: 0; ? ? 21 ????top: 0; ? ? 22 ????bottom: 0; ? ? 23 } ?

兼容性：主流瀏覽器均支持，IE6不支持。

方法三：position加 transform

? 01 <!-- html --> ? ? 02 <div class="wrap"> ? ? 03 ????<div class="center"></div> ? ? 04 </div> ? ? 05 ? ? ? 06 /* css */ ? ? 07 .wrap { ? ? 08 ????position: relative; ? ? 09 ????background: yellow; ? ? 10 ????width: 200px; ? ? 11 ????height: 200px; ? ? 12 } ? ? 13 ?? ? ? 14 .center { ? ? 15 ????position: absolute; ? ? 16 ????background: green; ? ? 17 ????top:50%; ? ? 18 ????left:50%; ? ? 19 ????-webkit-transform:translate(-50%,-50%); ? ? 20 ????transform:translate(-50%,-50%); ? ? 21 ????width: 100px; ? ? 22 ????height: 100px; ? ? 23 } ?

兼容性：ie9以下不支持 transform，手機端表現的比較好。

方法四：flex;align-items: center;justify-content: center

? 01 <!-- html --> ? ? 02 <div class="wrap"> ? ? 03 ????<div class="center"></div> ? ? 04 </div> ? ? 05 ? ? ? 06 /* css */ ? ? 07 .wrap { ? ? 08 ????background: yellow; ? ? 09 ????width: 200px; ? ? 10 ????height: 200px; ? ? 11 ????display: flex; ? ? 12 ????align-items: center; ? ? 13 ????justify-content: center; ? ? 14 } ? ? 15 ? ? ? 16 .center { ? ? 17 ????background: green; ? ? 18 ????width: 100px; ? ? 19 ????height: 100px; ? ? 20 } ?

兼容性：移動端首選。

方法五：display:flex;margin:auto

? 01 <!-- html --> ? ? 02 <div class="wrap"> ? ? 03 ????<div class="center"></div> ? ? 04 </div> ? ? 05 ? ? ? 06 /* css */ ? ? 07 .wrap { ? ? 08 ????background: yellow; ? ? 09 ????width: 200px; ? ? 10 ????height: 200px; ? ? 11 ????display: flex; ? ? 12 } ? ? 13 ? ? ? 14 .center { ? ? 15 ????background: green; ? ? 16 ????width: 100px; ? ? 17 ????height: 100px; ? ? 18 ????margin: auto; ? ? 19 } ?

兼容性：移動端首選。

方法六：純position

? 01 <!-- html --> ? ? 02 <div class="wrap"> ? ? 03 ????<div class="center"></div> ? ? 04 </div> ? ? 05 ? ? ? 06 /* css */ ? ? 07 .wrap { ? ? 08 ????background: yellow; ? ? 09 ????width: 200px; ? ? 10 ????height: 200px; ? ? 11 ????position: relative; ? ? 12 } ? ? 13 ? ? ? 14 /**方法一**/ ? ? 15 .center { ? ? 16 ????background: green; ? ? 17 ????position: absolute; ? ? 18 ????width: 100px; ? ? 19 ????height: 100px; ? ? 20 ????left: 50px; ? ? 21 ????top: 50px; ? ? 22 } ? ? 23 ? ? ? 24 /**方法二**/ ? ? 25 .center { ? ? 26 ????background: green; ? ? 27 ????position: absolute; ? ? 28 ????width: 100px; ? ? 29 ????height: 100px; ? ? 30 ????left: 50%; ? ? 31 ????top: 50%; ? ? 32 　margin-left:-50px; ? ? 33 　margin-top:-50px; ? ? 34 } ?

兼容性：適用于所有瀏覽器。

方法六中的方法一計算公式如下：

子元素（conter）的left值計算公式：left=(父元素的寬 - 子元素的寬 ) / 2=(200-100) / 2=50px;

子元素（conter）的top值計算公式：top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px。

方法二計算公式：

left值固定為50%;

子元素的margin-left= -（子元素的寬/2）=-100/2= -50px;

top值也一樣，固定為50%，子元素的margin-top= -（子元素的高/2）=-100/2= -50px。

方法七：兼容低版本瀏覽器，不固定寬高

? 01 <!-- html --> ? ? 02 <div class="table"> ? ? 03 ????<div class="tableCell"> ? ? 04 ????????<div class="content">不固定寬高，自適應</div> ? ? 05 ????</div> ? ? 06 </div> ? ? 07 ? ? ? 08 /*css*/ ? ? 09 .table { ? ? 10 ????height: 200px;/*高度值不能少*/ ? ? 11 ????width: 200px;/*寬度值不能少*/ ? ? 12 ????display: table; ? ? 13 ????position: relative; ? ? 14 ????float:left; ? ? 15 ????background: yellow; ? ? 16 }????? ? ? 17 ? ? ? 18 .tableCell { ? ? 19 ????display: table-cell; ? ? 20 ????vertical-align: middle; ? ? 21 ????text-align: center;??????? ? ? 22 ????*position: absolute; ? ? 23 ????padding: 10px; ? ? 24 ????*top: 50%; ? ? 25 ????*left: 50%; ? ? 26 } ? ? 27 ? ? ? 28 .content { ? ? 29 ????*position:relative; ? ? 30 ????*top: -50%; ? ? 31 ????*left: -50%; ? ? 32 ?????background: green; ? ? 33 } ?

暫時總結上面的七種，這種方法太多，其實只要習慣了其中的一兩種也就夠用了。

總結：在PC端，我習慣用方法一：display:table-cell。在移動端，方法六用的比較多。

實現水平垂直居中的css方法有很多，只要習慣用其中的一兩種即可。