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

家住魔仙堡 提交于 2020-01-15 15:14:42

(1)利用绝对定位和transform

<div class="parent">
    <div class="children">

    </div>
</div>

.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) 当子元素的宽高固定,父元素内含有除居中元素外其它元素(空标签也行)或者父元素的高度不为0时

 <div class="parent">

      <div class="children"></div>

      <span></span>
    </div>

    .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) display:table-cell

CSS中有一个用于竖直居中的属性vertical-align,但只有 当父元素为td或者th时,这个vertical-align属性才会生效,对于其他块级元素,例如 div、p等,默认情况下是不支持vertical-align属性的,可以设置块级元素的display类型为table-cell,激活vertical-align属性,但display:table-cell存在兼容性问题,所以这种方法没办法跨浏览器兼容。

<div class="parent">
  <div class="child">哈哈</div>
</div>

.parent{
    width: 400px;
    height: 100px;
    background: black;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.child{
    backgroung: red;
    display: inline-block
}

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

<div class="parent">
    <div class="child">哈哈</div>
  </div>
       .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;时候,
就相当于左右平分了宽度,所以会水平居中,垂直方向也是一样的道理

作者:有理想_
链接:https://www.jianshu.com/p/6693fdb4768f
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!