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
相對(duì)于它的父級(jí)元素垂直水平居中
)
.bigDiv{
width:200px;
height:200px;
display:table;
}
.small{
background-color:red幻锁;
display:table-cell敞映;
vertical-align:middle;
text-align:center糕珊;
}
3.display:flex动分;(給父級(jí)設(shè)置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;
}