關於文字和圖片的水平垂直居中,在前端界絕對算是一個老生常談的問題了,尤其是垂直居中,什麼千奇百怪的解法都能想的出來。下面我就總結一些比較常用的方法:
一、文本的水平垂直居中:
1、水平居中:
是不是很開心?超級簡單的問題,一個text-align:center 就搞定了。過過過...
-------------------------------------下面看單行、多行文本的垂直居中-------------------------------------
2、垂直居中:
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>
情況2:父級高度固定,嵌套行內元素
關鍵屬性:父級:diaplay:tabel; 子集:display:tabel-cell; vertical-align:middle;
</style>
情況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>
二、圖片的水平垂直居中:
1、水平居中:
1)、給img設display:inline-block;然後父級text-align:center;
2)、給img設display:block; 同時設margin: 0 auto;
2、垂直居中:
解法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:定位 + display: block; 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>
<style>img{border:0;}div{width:500px;height:300px;line-height:300px;background:#999;font-size:0;vertical-align:middle;text-align:center;}a{display:inline-block;width:0;} line-height == height 無法使替換元素垂直居中,所以要配合行內不可替換標籤<a><span>...img{vertical-align:middle;}</style><div><a>哪怕我裏面有一個字符都行</a><img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 鬱金香" /></div>
css改動以下,也可以這樣玩:
<style>img{border:0;}div{position:relative;width:500px;height:300px;background:#999;font-size:0;vertical-align:middle;text-align:center;}a{display:inline-block;width:0;height:100%;vertical-align:middle;}img{vertical-align:middle;}</style><div><a>我設置了display:inline-block && height=100% 就能使這個容器的line-height = height</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佈局的兼容有限,暫且不談。