定位
.div1{
position: absolute;
/* position: absolute;使用绝对定位的时候一定要给父元素添加相对定位*/
top:50%;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
margin-top:-60px;
background-color: #f00;
}
display:table-cell
.div2{
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #f00;
/*IE7不支持*/
/*div2高度确定table-cell,div2高度不确定外层套一层设置display:table*/
}
针对行内、行内块元素
.div3{
height: 30px;
line-height: 30px;
text-align: center;
background-color: #f00;
}
css3(IE9以下不支持*)
.div4{
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
height: 190px;
background-color: #f00;
}
.div5{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #f00;
}