html中块元素的垂直水平居中。及兼容性

Posted 2020-08-08 Sweet小马

1. 块在块中垂直居中
   (position:absolute; top:50%; margin-top:-二分之一高度)
   
   
2. 块在块中水平居中
   (子元素设置margin:0 auto 或auto)
   
   
3. 用方法1将垂直水平同时居中

   #box {

   width: 100px;

   height: 80px;

   background-color: gray;

   position:absolute;

   top:50%;

   left:50%;

   margin-top:-40px;<!--向上高度一半-->

   margin-left:-50px;<!--向左宽度一半-->

   }