如何保持浮层水平垂直居中

(1)利用绝对定位和transform

    


    


.children{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    background: black;
}

如果不确定子元素宽高度情况下，可以用此方法，不过css3属性不兼容IE低版本浏览器

(2) 利用flexbox

.parent{
　justify-content:center;
　align-items:center;
　display: -webkit-flex;
}

(3)将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。

　　　　　　


　　　　　　
　　　　

　　　　.parent{
        　 height:400px;//有除对定位元素外其它元素时可不设，若没有则需要
           position: relative;
           background: red;
        }
      .children{
           width: 200px;
           height: 200px;
           margin: -100px 0 0 -100px;
           background: black;
           position: absolute;
           top: 50%;
           left:50%;
      }

(4) 利用定位与margin: auto;

　　　　
哈哈
　　
       .parent{
               width: 600px;
               height: 400px;
               background: red;
               position: relative;
          }
          .child{
               width: 200px;
               height: 200px;
               position: absolute;
               top: 0;
               left: 0;
               bottom: 0;
               right: 0;
               margin: auto;
               background: black;
          }

原理：因为 parent 宽度等于 child宽度 + left + right + marginLeft + marginRight，当设置了left:0;right:0;margin: auto;时候，就相当于左右平分了宽度，所以会水平居中，垂直方向也是一样的道理

前端培训