居中布局（水平+垂直）

Posted 2020-11-27 qjb2404

<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%);
}