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

2017-09-13 12:30:21来源:CSDN作者:qq_39963971人点击

分享

(一)利用绝对定位与transform 
 

       <div class="parent">      <div class="children"></div>    </div>
  • 1
  • 2
  • 3
  • 4
  • 5

 将父元素定位(relative),子元素如下

 .children{    position: absolute;    top: 50%;    left: 50%;    -webkit-transform:translate(-50%,-50%);    background: black;  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

(二)利用flexbox

 .parent{    justify-content:center;    align-items:center;    display: -webkit-flex;  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台