让元素垂直居中
2016-12-08 本文已影响0人
陆小琪
1.定位
width：100px；
height：100px；
background-color：red；
1)
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
2)
position:absolute;
left:0;
top:0;
right:0;
botton:0;
margin:auto;
3)
position:absolute;
left:50%;
top:50%;
margin-top:-50px; //容器的一般高度
margin-left:-50px;
2display：table（table-cell
相对于它的父级元素垂直水平居中
）
.bigDiv{
width:200px;
height:200px;
display:table;
}
.small{
background-color:red；
display：table-cell；
vertical-align：middle；
text-align：center；
}
3.display：flex；(给父级设置display：flex；让元素水平垂直居中)
（弹性布局）
.bigDiv{
width:200px;
height:200px;
display:flex;
justify-content:center;
align-items:center;
}
.smallDiv{
width:100px;
height:100px;
background-color:blue;
}
4.margin（外边距）
.bigDiv{
width:200px;
height:200px;
background-color:red;
}
.smallDiv{
width:100px;
height:100px;
background-color:blue;
margin:50px auto;
}
