浮动水平居中(如何保持浮在水面)

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

(1)利用绝对定位和transform

<div class=>    <div class=>    </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)将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现。

<div class=>　　　　　　<div class=></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) 利用定位与margin: auto;

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

免责声明:本站部份内容由优秀作者和原创用户编辑投稿，本站仅提供存储服务，不拥有所有权,不承担法律责任。若涉嫌侵权/违法的，请反馈，一经查实立刻删除内容。本文内容由快快网络小涵创作整理编辑！