css实现div水平垂直居中的三种办法

div水平居是一个很常见的效果，新手可能只知道水平居中，但不知道垂直居中，下面就来介绍一下。

HTML部分：

<div class="yuuk">我是一个DIV</div>

CSS部分：

第一种方法（用的最多的一种）：

.yuuk {
	width:100px;
	height:100px;
	background:#000;
	position:absolute;
	left:0;
	top:0;
	margin-left:-50px;
	margin-top:-50px;
}

第二种方法（奇技淫巧）：

.yuuk {
	width:120px;
	height:120px;
	position:absolute;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
}

第三方方法（用到了css3属性）：

.yuuk {
	width:100px;
	height:100px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
}

选一个适合你自己的吧 o(∩_∩)o