首页 > 代码库 > 布局-水平垂直居中
布局-水平垂直居中
结构：
1 <div class="parent">2 <div class="child">DEMO</div>3 </div>
样式：
1.解决方案一：text-align + inline-block + table-cell + vertical-align(结合前面的水平居中+垂直居中)
1 .parent { 2 background-color: grey; 3 width: 300px; 4 height: 200px; 5 6 display: table-cell; 7 vertical-align: middle; 8 9 text-align: center;10 }11 .child {12 display: inline-block;13 background-color: skyblue;14 }
2.解决方案二： absolute+transform
.parent { background-color: grey; width: 300px; height: 200px; position: relative; } .child { position: absolute; top: 50%;/*相对容器的百分比*/ left: 50%; transform: translate(-50%,-50%);/*相对自身的百分比*/ background-color: skyblue; }3.解决方案三：flex + justify-content + align-items
.parent { background-color: grey; width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; } .child { background-color: skyblue; }
布局-水平垂直居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。