如何解决绝对定位 flex 孩子为什么这个标题不居中?
给定
.parent {
display: flex;
justify-content: center;
align-items: center;
}
在下面的代码段中,绝对定位的孩子居中:
.parent,.child {
border-radius: 0.25rem;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 10rem;
height: 10rem;
background-color: #eee;
}
.child {
position: absolute;
width: 1rem;
height: 1rem;
background-color: #444;
}
<div class='parent'>
<div class='child'></div>
</div>
但是在以下示例中,h1
不是 flex 父级的直接子级。我能想到的唯一有意义的区别是它的父级的填充。我的问题是父级的填充如何影响绝对定位的子级? - 如果是这样?
鉴于绝对定位的子项已从文档的正常流程中删除。
* {
box-sizing: border-box; margin: 0; padding: 0;
}
html,body {
height: 100%;
}
html {
transform: scale( 0.45);
}
body,.parent {
display: flex;
justify-content: center; align-items: center;
padding: 4rem;
font-family: Arial;
color: #444;
}
.wrap {
border-radius: 1rem;
width: 100%;
padding: 2rem;
background-color: #eee;
}
.parent,h1 {
position: relative;
border-radius: 0.5rem;
padding-top: 50%;
background-color: #ddd;
}
h1 {
position: absolute;
padding: 1rem;
background-color: #fff;
}
<div class='wrap'>
<div class='parent'>
<h1>heading</h1>
</div>
</div>
为什么上面的 h1
没有垂直居中?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。