将绝对定位元素与父元素的中间对齐答案

【问题标题】：Aligning an absolute positioned element to the middle of a parent element将绝对定位元素与父元素的中间对齐
【发布时间】：2014-01-22 18:20:43
【问题描述】：

如果我有类似的东西：

<ul>
    <li></li>
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

并且让第一个<ul>相对定位，而第二个<ul>绝对定位，是否可以将第二个<ul>的中间对齐到父@的中间987654325@，并保持响应？

需要明确的是，这不是vertical-align，或与它有任何关联。

【问题讨论】：

【解决方案1】：

要在其父级的中间（水平）保留一个没有固定width 的绝对定位元素，我建议：

#child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

【讨论】：

几乎明白了。最初，子 ul 的左侧与父 li 的左侧对齐。您的更改现在已将子 ul 的中间对齐到父 li 的左侧，并且对于所有屏幕尺寸/浏览器宽度/分辨率都保持这种方式。进步！
您能否提供一个小提琴或示例来演示实际存在的问题？
给我几分钟。我需要在我的文件中过滤掉相关的 CSS。我把它弄得如此紧凑和组合，它会让强迫症患者嫉妒！
我只是把我的代码弄乱了一点，并修改了你的添加。由于我有多个下拉菜单，因此我为每个孩子 ul 分配了一个类，并仅向其添加了变换，以便我可以相应地调整宽度。这似乎是一个足够体面的解决方案。我去掉了左边：50%；完全地。看起来它没有做任何有价值的事情。我认为这是我需要的解决方案。谢谢。
@Hiigaran 您是否使用了供应商前缀？ -webkit-transform

【解决方案2】：

这是否也仅包含文字或图像？

试试这个：

display: block;
margin-left: auto;
margin-right: auto;

【讨论】：