关于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位置。