1.利用position
生成绝对定位的元素进行水平垂直居中,该方法需要知道元素的宽、高
.test{
width : 300px;
height : 200px;
background-color: #ddd;
position : absolute;
left : 50%;
top : 50%;
margin-left : -150px; /*一半的高度*/
margin-top : -100px; /*一半的宽度*/
border:1px solid #ddd;
}
2.使用css3的transform设置元素进行水平垂直居中,不需要知道元素的宽、高
.test{
width : 300px;
height : 200px;
background-color: #ddd;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
3.使用position生成绝对定位与margin:auto结合让元素进行水平垂直居中,改方法需要设置元素的宽、高
.test {
width : 300px;
height : 200px;
background-color: #ddd;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* 使用margin进行自动水平垂直居中*/
}