CSS實現文字和圖片的水平垂直居中

　　關於文字和圖片的水平垂直居中，在前端界絕對算是一個老生常談的問題了，尤爲是垂直居中，什麼千奇百怪的解法都能想的出來。下面我就總結一些比較經常使用的方法：

 

1、文本的水平垂直居中：

 一、水平居中：

是否是很開心？超級簡單的問題，一個text-align：center 就搞定了。過過過...

 

-------------------------------------下面看單行、多行文本的垂直居中-------------------------------------

 

二、垂直居中：

　　1）、單行文本

<!--只要height值等於line-height值就ok -- >
<div style="height:100px;line-height:100px;">
    有且僅佔有一行的狀況下垂直居中
</div>

 ps：height === line-height 沒法使替換元素，如<img>、<input>、<areatext>、<select>...垂直居中，必須有<a>、<span>...相似行內標籤配合才能使垂直居中生效！ （下面的圖片垂直居中解法5 會用到這個特性）

 

　　2）、多行文本

狀況1：高度固定

關鍵屬性：display:tabel-cell; vertical-align:middle;

<style>
div{height:300px;width:200px;vertical-align:middle;display:table-cell;word-break:break-all;background:#666;}
</style>

<div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>

 

狀況2：父級高度固定，嵌套行內元素

關鍵屬性：父級:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;

<style>
div{height:300px;width:200px;display:table;word-break:break-all;background:#666;}
span{display:table-cell;vertical-align:middle;}
 </style>

<div>
<span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
</div>

 

狀況3：父級高度固定，嵌套塊級元素且該元素高肯定

關鍵屬性：定位 + margin-top：負值；

<style type="text/css">
*{margin:0;padding:0;}
div{height:300px;width:200px;position:relative;word-break:break-all;background:#666;}
p{position:absolute;top:50%;left:0;height:80px;margin-top:-40px;background:red;}
</style>

<div>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</div>

 

狀況4：父級高度固定，嵌套塊級元素且該元素高不肯定

關鍵屬性：定位 + transform：translateY(-50%);

<style>
*{margin:0;padding:0;}  /*不加的話會被p或其餘標籤默認樣式影響*/
div{height:300px;width:200px;position:relative; word-break:break-all;background:#666;}
p{position:absolute;top:50%;left:0;transform:translateY(-50%);}/*我的建議，被包裹的塊標籤就不要height，用內容將高度撐開就好*/
</style>

<div>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</div>

 

狀況5：父子均 定寬 定高  (水平垂直居中)

關鍵屬性：定位 + margin：auto；

<style>
*{margin:0;padding:0;}
div{height:300px;width:400px;position:relative;word-break:break-all;background:#666;}
p{position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;height:80px;width:200px;background:red;}
</style>

<div>
<p>ddddddddddddddddddddddddddddddddddd</p>  /*水平垂直居中*/
</div>

 

2、圖片的水平垂直居中：

一、水平居中：

 　 1）、給img設display:inline-block;而後父級text-align：center；

　  2）、給img設display:block; 同時設margin: 0 auto;

 

二、垂直居中：

解法1：img父級display:table-cell; vertical:middle; height:xxx;  （推薦）

<style>
div{display: table-cell;width:400px;height:300px;vertical-align: middle;text-align:center;background:#999;} /*table-cell 能夠使替換元素垂直居中，強大！*/
</style>

<div>
<img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鮮花港 - 鬱金香" />
</div>

 

解法2：定位 + transform: translate(-50%,-50%);

<style>
div{position:relative;width:400px;height:300px;text-align:center;background:#999;}
img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
</style>

<div>
<img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鮮花港 - 鬱金香" />
</div>

另：當已知圖片大小時也能夠把translate換成margin負值，這裏不推薦使用。

 

解法3：定位 + margin：auto；

<style>
div{position:relative;width:400px;height:300px;text-align:center;background:#999;}
img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>

<div>
<img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鮮花港 - 鬱金香" />
</div>
</body

 

解法4：父級display：table; + 包裹img的元素(<span>)設爲display：table-cell;

<style>
div{display:table;width:400px;height:300px;text-align:center;background:#999;}
span{display:table-cell;vertical-align:middle;}
</style>

<div>
<span>
<img src="/i/eg_tulip.jpg"  width=150 height=150 alt="上海鮮花港 - 鬱金香" />
</span>
</div>

 

解法5：父級line-height == height + <img>vertical-align:middle （推薦）

 

<style>
img{border:0;}
div{width:500px;height:300px;line-height:300px;background:#999;text-align:center;}
img{vertical-align:middle;}
</style>

<div>
<a>哪怕我裏面有一個字符都行</a>
<img src="/i/eg_tulip.jpg"  alt="上海鮮花港 - 鬱金香" />
</div>

 

解法6：background實現

div{
　　width:500px;
   height:300px;
   background:#999 url(/i/eg_tulip.jpg) no-repeat center center;
}

<div></div> 

 

下面是圖片垂直水平居中的效果：

 

介於pc端對flex佈局的兼容有限，暫且不談。  

 

 

 若發現錯誤之處，歡迎拍磚指正，真心感謝！_><_