css實現文字垂直置中問題

標籤：for   flex   line   標籤   限制   contain   垂直   ble   resize   

一、問題描述

 當高度固定或者不固定時，單行或者多行文本難以實現垂直置中；

二、產生原因

1、高度不固定，CSS 本身並沒有提供相應的 API 支援（確切來說是提供不全）；

2、瀏覽器不支援；

三、解決方案：

1、使用line-height屬性，將line-height設定與元素高度等高。

優點：簡單明了；

缺點：只適用於單行文本，局限性大

代碼：

.center-text-trick {height: 100px;line-height: 100px;

white-space: nowrap;}

 

方法二

padding：設定相等的上下padding值

缺點：有高度限制時不能垂直置中。

代碼：

.link{padding-top: 30px;padding-bottom: 30px;}

<div class="link">padding-top:30px;padding-bottom: 30px;</div>

 

 

方法三

絕對位置置中：top:0;bottom:0;left:0;right:0;margin:auto;

元素在過度受限情況下，將margin設定為auto，瀏覽器會重算margin的值，過度受限指的是同時設定top/bottom與height或者left/right與width。

優點：支援響應式，只有這種方法在resize之後仍然垂直置中

缺點：使用絕對位置要求元素必須設定明確高度，沒有顯式設定overflow時，內容超過元素高度時會溢出，沒有捲軸。

IE瀏覽器不支援

代碼：

.absolute_center{/*display:none;*/position:absolute;width:200px;height:200px;top:0;bottom:0;left:0;right:0;margin:auto;background:#518fca; resize:both;/*用於設定了所有除overflow為visible的元素*/overflow:auto; }

 

方法四

固定高度定位置中：top: 50%;height: 100px;margin-top: -50px;

優點：代碼量少、瀏覽器安全色性高，支援ie6，ie7

缺點：不支援響應式(不能使用百分比、min/max-width)，高度固定。

代碼：

.parent {position: relative;}

.child {position: absolute;top: 50%;height: 100px;margin-top: -50px; /*transform: translateY(-50%);*/}

 

方法五

不固定高度定位置中：top:50%;left:50%;transform:translate(-50%, -50%)

缺點：不支援響應式(不能使用百分比、min/max-width)

代碼：

.parent {position: relative;}

.child{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}

 

 

方法六

table-cell方式置中：dispaly:table;display:table-cell;vertical-align:middle;

display:table-cell屬性指讓標籤元素以表格儲存格的形式呈現，類似於td標籤。

原理：利用表布局特點，vertical-align設定為middle後，儲存格中內容中間與所在行中間對齊。

優點：支援任意內容的可變高度、支援響應式布局

缺點： 每一個需要垂直置中的元素都會需要加上額外標籤（需要table、table-cell兩個額外元素）；

IE瀏覽器不支援

代碼：

.wrapper{ height:200px; display:table; }

.content{vertical-align:middle;display:table-cell; /*cell垂直置中，如果外層div不為table則tablecell須有高度*/ border:1px solid #FF0099; width:760px;}

<div class="wrapper">

<span class="content">不定高度文字</span></div>

 

方法七

彈性盒式布局置中：display: flex;justify-content: center;

利用彈性盒式布局，將子項目的主軸、側軸的相片順序都設定為置中對齊

優點：真正的垂直置中布局

缺點：ie11才開始支援彈性布局

代碼：        

<div class="container is-Flexbox"><div class="center">既要腳踏實地於現實生活，又要不時跳出現實到理想的高台上張望一眼。<br>在精神世界裡建立起一套豐滿的體系，引領我們不迷失不懈怠。</div></div>

  .is-Flexbox{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display: -webkit-flex;display:flex; -webkit-align-items:center;

align-items:center;-webkit-justify-content: center;justify-content: center;}

 

 

總結

1、只有單行文本時，可以將line-height設定與元素高度等高

2、外層div與內層div高度均固定時，可以使用設定相等的上下padding值；

3、當高度固定時，可以採用固定高度定位置中：top: 50%;height: 100px;margin-top: -50px;此方法對IE瀏覽器支援較好；

4、當高度不固定時，可以採用彈性盒式布局置中：display: flex;justify-content: center;此方法操作簡單，但ie11才開始支援彈性布局；或者採用table-cell方式置中：dispaly:table;display:table-cell;vertical-align:middle;此方法支援任意內容的可變高度，但操作繁瑣，並且IE8以上的瀏覽器才支援；

 

 

 

 

css實現文字垂直置中問題