您的位置：首页 > Web前端 > CSS

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

2017-09-13 10:32 423 查看
（一）利用绝对定位与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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3 css 浮动元素水平居中 css hack transform
相关文章推荐
新的分享
章节导航