水平垂直居中，妙計

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

我會把日常學到的東西，在實戰中的個人總結寫在博客中，如果發現了問題，希望能對我做出點評哦~