元素水平垂直居中--三种方式

(1) css3的transform
 
<div class="box">
	<div class="ele"></div>
</div>
.box{
    background:yellow;
    width:100%;
	height:300 px;
	pisition:relative;
}
.ele{
	background:red;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
} 

(2)flex弹性盒子布局 

<div class="box">
	<div class="ele"></div>
</div>
.box{
	background:yellow;
	width:100%;
	height:300 px;
	display:flex;
	justify-content:center;  //子元素水平居中
	align-items:center;   //子元素垂直居中
}
.ele{
	background:red;
}

(3)display 的 table-cell

<div class="box">
	<div class="ele"></div>
</div>

.box{
	background:yellow;
	width:100%;
	height:300 px;
	display:table;
}
.ele{
    background:red;
	display:table-cell;
	text-align:center; //子元素水平居中
	vertical-align:middle; //子元素垂直居中
}