首页 > 代码库 > 水平垂直居中常见方式总结
水平垂直居中常见方式总结
水平垂直居中常见方式总结
html结构为：
<div class="parent"> <div class="child"></div></div>
(1)父元素相对定位，子元素关键在于设置为绝对定位，margin:auto
.parent{ width:400px; height:400px; background:#afa; position:relative;}.child{ position:absolute; left:0; bottom:0; right:0; top:0; margin:auto; background:yellow; width:100px; height:100px;}
(2)父元素相对定位，子元素绝对定位，且设置transform:translate(-50%,-50%)
.parent{ width:400px; height:400px; background:#afa; position:relative;}.child{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:yellow; width:100px; height:100px;}
(3)父元素设置为display:flex;justify-content:center;align-items:center
.parent{ width:400px; height:400px; display:flex; justify-content:center; align-items:center; background:#afa;}.child{ width:100px; height:100px; background:yellow;}
（4）设置父元素display:table-cell;text-align:center;vertical-align:center;子元素：display:inline-block;
.parent{ display:table-cell; width:400px; height:400px; background:#afa; text-align:center; vertical-align: middle;}.child{ display:inline-block; width:100px; height:100px; background:yellow;}
水平垂直居中常见方式总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。