水平垂直居中

css中想要块级元素水平垂直居中，方法如下：
方法一：

.d1{
	width:100px;
	height:100px;
	background:#000;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;

这个方法定位元素向下、向右偏移最近定位祖先元素宽度高度的50%如下：

可以看到它当前的位置，然后再向左、向上偏移它自己宽度、高度的一半即可达到水平垂直居中的效果。如下：

方法二：

.d1{
	width:100px;
	height:100px;
	background:#000;
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin:auto auto;

这个方法是我喜欢的方法，上下左右都设置0，外边距设置自动，因为拔河效应，从而达到垂直水平的居中，也可以单独设置上下0，那么他就垂直居中，同理左右为0，水平居中。注意的一点是，元素要设置宽高！

.d1{
	width:100px;
	height:100px;
	background:#000;
	position:absolute;
	top:0;
	bottom:0;
	/*left:0;*/
	/*right:0*/
	margin:auto 0;

方法三：
这个方法是CSS3中的移动(translate)属性，通过x、y轴来调整自身的位置。

.d1 {
	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%);
	}

我会把日常学到的东西，在实战中的个人总结写在博客中，如果发现了问题，希望能对我做出点评哦~