块级元素水平+垂直居中
1.绝对定位+margin:auto;
设置元素为绝对定位,以及left,right,top,bottom值均为0;margin:auto;
*{
margin:0;
padding:0;
}
.box{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
background-color: red;
width:800px;
height:600px;
}
2.margin:0 auto;+相对定位
先设置元素的外间距为上下为零,左右自动,元素会水平居中,再相对定位,将元素的top值设为父元素的50%,margin-top设置为负的元素高的1/2,元素会垂直居中;
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.box{
width:800px;
height:600px;
margin:0 auto;
position:relative;
top:50%;
margin-top: -300px;
background-color:red;
}
3.相对定位+transform;
将元素相对定位后,设置top:50%;transform:translatey(-50%);将元素向上平移自身的50%,元素会垂直居中,在设置margin:0 auto;元素水平居中;
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.box{
position:relative;
width:800px;
height:600px;
background-color: red;
top:50%;
transform: translatey(-50%);
margin:0 auto;
}