当视图具有定位的父元素时，如何水平地将绝对定位的元素相对于视图进行居中？
当视图具有定位的父元素时，如何水平地将绝对定位的元素相对于视图进行居中？
提问于 2018-03-10 02:05:38
例如：如何使本例中的蓝色子元素相对于视口 (即)水平居中。)，前提是父级必须保持不变。
其他资格：
- 我不想把它修好。
- 假设父视图与左视图端口之间的距离未知。
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: absolute;
bottom: 100%;
}<div class="parent">
<div class="child">
child
</div>
</div>
我正在努力使这个问题成为一个SSCCE。实际上，用例是我有一个下垂仔 (就像下拉列表一样，期望它出现在上面，而不是在触发按钮下面)。我想让左撇子菜单居中。
菜单需要绝对定位，否则会妨碍其他DOM元素的流。我需要定位容器，这样我就可以在菜单上设置bottom: 100%;，这样它就会出现在触发按钮上方。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-10 07:56:00
在这种情况下，您可以使用position:fixed，但是为了避免它被修复，对主体应用一个空转换：
body {
transform:translate(0,0);
min-height:150vh;
}
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: fixed;
left:50%;
transform:translate(-50%,-100%);
}<div class="parent">
<div class="child">
child
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49204628
复制相关文章
相似问题
腾讯云开发者
