首页 > 代码库 > 布局-垂直居中
布局-垂直居中
结构：
<div class="parent"> <div class="child">DEMO</div> </div>
样式：
1.方案一：vertical-align + table-cell （若child为浮动的，也是可以的）
.parent { height: 200px; background-color: grey; display:table-cell;/*父容器变成了一个单元格*/ vertical-align: middle;/*可作用在inline元素上，inline-block元素上，以及table-cell元素上*/ } .child { background-color: skyblue; } /*table-cell兼容到IE8，若要兼容IE6,7，把结构换成表结构，即兼容性比较好*/2.方案二：absolute+transform
.parent { position: relative; background-color: grey; height: 200px; width: 40px; } .child { background-color: skyblue; position: absolute; top: 50%;/*相对与容器的百分比*/ transform: translateY(-50%);/*相对与自身的百分比*/ } /*优点：子元素不会影响其他元素 缺点：transform是css3新增的元素*/3.方案三： flex + align-items(默认值：stretch，垂直方向对齐)（align-items：stretch/flex-start/center/flex-end/baseline）
1 .parent { 2 display: flex; 3 align-items: center; 4 5 background-color: grey; 6 height: 200px; 7 width: 40px; 8 } 9 .child {10 background-color: skyblue;11 }12 /*优点：只给parent设置样式13 缺点：只有高版本才兼容*/
布局-垂直居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。