前言：水平居中，我們可以很容易想到使用text-align實現文字水平居中，使用margin:0px auto;可以實現元素水平居中；所以重點將是怎么實現文字和元素的垂直居中？？

?

--- 本文將通過舉栗子說明各種解決方式：

?首先，單行文字、多行文字怎么水平垂直居中？？

?

① 方案一：文本水平居中使用text-align:center即可，height設置和line-height一致可以實現單行文本垂直居中；如下

.class1 {height:50px;width:500px;text-align: center;background-color:lightblue;line-height:50px;overflow: hidden; } <div class="class1">測試單行文字水平垂直居中</div>

?

?

②方案二：具體到像素，單行或多行文字垂直居中還可以通過上下padding相等來實現，如下

.class2 {font-size:20px;color:red;padding:20px 0px;border:1px solid red;text-align:center; } <p class="class2">這是段落內容，可以通過上下padding實現文字垂直居中</p>

?

?

③方案三：使用flex布局的justify-content: center;align-items: center;以及text-align:center;來單行或多行文字水平垂直居中實現，如下

.class3 {height:90px;color:blue;border:1px solid red;display:flex;justify-content: center;align-items: center;text-align:center;} <p class="class3">這是段落內容，可以通過上下display:flex和text-align：center實現文字水平垂直居中，可以通過上下display:flex和text-align：center實現文字水平垂直居中，</p>

?

?

④方案四：display: table-cell;vertical-align: middle;實現單行或多行文字垂直居中，如下

.class4 {height:90px;width:500px;text-align: center;background-color:orange;display: table-cell;vertical-align: middle;}

注意：vertical-align:center只對行內元素有效，加上display：table-cell可以實現垂直居中的效果；但是table布局不推薦使用，因為會影響網頁性能；

?

?

元素水平垂直居中：

①方案一：已知子元素寬高，比如寬高都是200px; 使用absoluted定位和負margin值是寬高的一半來實現水平垂直居中，如下

.outBox {position: relative;width:600px;height:300px;border:1px solid purple;}.innerBox {width:200px;height:200px;background-color:lightblue;position: absolute;top:50%;left: 50%;margin-top:-100px;margin-left: -100px;} <div class="outBox"><div class="innerBox">這是元素內容塊，使用絕對定位結合負margin來實現垂直水平居中</div></div>

說明：項目中經常使用，兼容性較好

?

?

?

②方案二：已知元素寬高。在絕對定位下，top、right、bottom、left均為0的情況下會自動填充父元素的可用空間，再使用margin：auto會平均分配空間；如下

.outBox {position: relative;border:1px solid red;height:250px;width:650px; } .innerBox {width:300px;height:100px;position: absolute;top:0;bottom: 0;left:0;right:0;background-color: lightblue;margin:auto; } <div class="outBox"><div class="innerBox">這是需要水平居中的元素，使用的是絕對定位top、bottom、left、right均為0</div> </div>

?

③方案三：元素未知或已知寬高。利用css3的transform實現垂直水平居中

outBox {position: relative;border:1px solid red;height:250px;width:650px; } .innerBox {border:1px solid blue; position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); }

說明：此方法和flex布局只支持IE9＋以上的瀏覽器。

?

?

④元素未知或已知寬高。利用flex彈性布局實現（flex布局后續會詳解）

.outBox {border:1px solid red;height:250px;width:650px;display: flex;justify-content: center;align-items: center; } .innerBox {border:1px solid blue; }

?

?

其它常用的布局常遇到的問題demo

?

Demo1: 如何解決單行圖片和文字水平居中排列的問題？？

<div><img src="http://www.w3school.com.cn/i/eg_bookasp.gif" style="width:50px;height:50px;vertical-align: middle;">測試用的文字 </div>

說明：只需要在img標簽加上vertical-align:middle; 樣式就可以實現單行圖片文字垂直居中；

效果：

?

?

Demo2：為什么在使用dispaly:inline-block; 的元素上使用vertical-align：middle;無效？？

<div style="border:1px solid red ;width:220px;height:50px;display: inline-block;vertical-align: middle;text-align: center;">需要垂直居中顯示的文字 </div> <span>nihao</span>

說明：vertical-align:middle;只對行內元素有效。 使用了dispaly:inline-block;的元素可以理解為是可在一行內排列的塊級元素，可以設置寬高；解決辦法：使用display:cell-table;vertical-align：middle; 或使用line-height；或使用flex布局居中；

效果：

?

?

?

總結

以上是生活随笔為你收集整理的CSS文字或元素的水平垂直居中多种方式（简单明了）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。