一焕参、已知寬度和高度
第一種方法:?
?.parent{
width: 200px;
height: 200px;
background: green;
position:absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
第二種方法
.parent{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
}
二盛卡、未知寬高時
第一種方法:
.parent{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);/* 使用css3的transform來實現(xiàn) */
}
第二種方法:
.parent{
display:flex;
justify-content:center;
align-items:center;/* 注意這里需要設(shè)置高度來查看垂直居中效果
*/background:#AAA;height:300px;
}