css - 居中绝对定位的 div 与绝对 child 水平

Question

在一个元素中，我在一个页面上有四个绝对定位的元素，它们位于一个绝对定位的容器内(后者是为了将它们相对于视口(viewport)底部对齐，而更多内容将在视口(viewport)下方跟随)。四个元素紧挨着，不重叠。

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

我可以想到一个像这样的解决方案，加上一个额外的内部 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

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

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