<div class="parent"> <div class="child"></div> </div>
方案一:table + margin实现水平居中,table-cell + vertical-align实现垂直居中
.parent{ width:1000px; height:500px; background:#ccc; display:table-cell; vertical-align:middle; } .child{ width:200px; height:200px; background:#c9394a; display:table; /*block*/ margin:0 auto; }
方案二:absolute + transform
.parent{ width:1000px; height:500px; background:#ccc; position:relative; } .child{ width:200px; height:200px; background:#c9394a; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
Believe in yourself