Question

在一个项目中，我在一个页面上有四个绝对定位的元素，这些元素位于一个绝对定位的容器内（后者是为了使它们相对于视口的底部对齐，而更多内容将在视口下方跟随）。这四个元素彼此相邻，不重叠。

有没有办法（动态）将四个元素集中在绝对定位的父元素中？我知道这听起来很奇怪，因为绝对定位意味着没有自动放置。动态地表示响应元素会在某个断点处改变大小和位置，但仍应始终在视口中水平居中。

我可以想到一个像这样的解决方案，带有一个额外的内部div，但是我没有理解实际解决这个难题，因为我不知道一个好的方法让内部div抓住总宽度它的四个绝对定位的子元素：

<div class="myAbsoluteContainer">
    <div class"myInnerDivForCentering">
        <div class="myAbsoluteChildElement" id="child1"></div>
        <div class="myAbsoluteChildElement" id="child2"></div>
        <div class="myAbsoluteChildElement" id="child3"></div>
        <div class="myAbsoluteChildElement" id="child4"></div>
    </div>
</div>

Answer 1

我不确定为什么你需要绝对定位孩子。这是你想要实现的目标：http://jsfiddle.net/k65pxydx？

.myAbsoluteContainer {
    text-align: center; /* Centers the elements horizontally */
}
.myAbsoluteChildElement {
    display: inline-block;
    vertical-align: middle; /* Centers the elements vertically */
}

中心绝对定位div与绝对孩子

1 个答案: