居中绝对定位 div 水平与绝对 children

Question

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

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

我可以想到一个像这样的解决方案，加上一个额外的内部 div，但我没有想到真正解决这个难题，因为我不知道内部 div 获取其四个绝对定位的 child 元素的总宽度：

<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

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

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

居中绝对定位 div 水平与绝对 children

Center absolutely positioned div horizontally with absolute children

css

css-position