CSS定位水平和垂直居中

定位水平和垂直同时居中的CSS：

父级作相对定位、子级作绝对定位

HTML

<div class="outer">		
	<div class="inner">inner</span>
</div>

方法1 CSS

.outer{background:#444;width:1000px;height:500px;position:relative;}
.inner{background:#999;width:100px;height:50px;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}

方法2 CSS

.outer{background:#444;width:1000px;height:500px;position:relative;}
.inner{background:#999;width:100px;height:50px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}