關於CSS居中顯示的總結

不記得是什麼時候，感覺好久以前看過一篇文章，講的是網頁優化的一些小技巧，記得好像有這樣一句話：一個優秀的網頁要儘量避免使用浮動（float）和定高定寬，定高定寬（px）不利於網頁的自適應排版，這很容易理解，浮動是個好東西，但有時候處理不好確實是個大麻煩，額，好像跑題了，不多說了。

首先，來說一說圖片的垂直居中(以多張圖片並排顯示，各自居中爲例)。

比較巧妙的一個辦法是用一個透明的PNG圖片作爲IMG標籤的SRC，將PNG圖片拉伸到外層容器的大小，然後把想要居中顯示的圖片作爲IMG標籤的背景圖片，加上background-position:center;就可以實現圖片的居中顯示了。

<img src="transparent.png" style="background:url(target.jpg) center no-repeat;width:100vw;height:100vh;" />

另一種辦法是使用display:table-cell;和text-align:center;

<div style="width:100vw;height:500px;display:table-cell;vertical-align:middle;text-align:center;font-size:0px;">
	<img src="a.jpg" />
</div>

注意：這裏必須要加上font-size:0px;這個屬性，不然會在chrome下多出4px高度，IE10下多出3.91px（其他IE版本未測試）。

還一種方法是使用display:inline-block;和text-align:center;和上一中方法類似

<div style="width:100vw;line-height:500px;display:inline-block;text-align:center;font-size:0px;">
<img src="a.jpg" style="vertical-align: middle;" />
</div>

當然，容器的高度也不一定非要用line-height撐起，也可以使用僞類:after來解決

<div id="a" style="width:100vw;height:500px;display:inline-block;text-align:center;font-size:0px;">
	<img src="a.jpg" style="vertical-align: middle;" />
</div>

#a:after{content:"";height:100%;vertical-align: middle;display:inline-block;}

接下來，我們再來看看元素居中

1.使用CSS3顯示居中

想要居中的div層CSS樣式爲position:relative;top:50%;transform:translateY(50%);

不過缺點就是支持IE9+;

2.用絕對定位來顯示居中的效果（absolute）

<div style="margin:0px;position:relative;width:100vw;height:100vh;background-color:#B5B5B6;">
	<span style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;margin:auto;width:50vw;height:300px;background-color:red;">Hello world!</span>
</div>

不過這種方法也存在許多缺陷，比如：父元素div，子元素span（無論是塊元素還是行元素）都需要給它定高定寬（auto不適用）才能使其實現居中的效果。（img可不用定寬高）

<div style="margin:0px;position:relative;width:100vw;height:100vh;background-color:#B5B5B6;">
	<div style="position:relative;top:50%;height:0px;">
		<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;margin:auto;width:50vw;height:300px;background-color:red;">Hello world!</div>
	</div>
</div>

上面的代碼爲絕對居中的改進版，可以定義居中點top位置。