使用元素中心定位元素？ [复制]答案

【问题标题】：Position Element Using Center of Element? [duplicate]使用元素中心定位元素？ [复制]
【发布时间】：2017-07-15 20:51:05
【问题描述】：

我正在尝试制作一个具有position: absolute; 并使用百分比定位的元素。问题是，它不是使用中心定位，而是使用左角。有没有办法使用纯 CSS 做到这一点？该元素是一个 flexbox，因此 display CSS 属性没有花哨的技巧。这是我的代码。

#whateverDiv{
    display: flex;
    left: 25%; /* Uses left corner of element. I want to make it use the center of the element. */
}

此外，这不是 here 的重复项，因为 OP 要求使用百分比将元素居中。我需要把它放在任何地方，比如25%。

【问题讨论】：

标签： html css position flexbox absolute

【解决方案1】：

如果没问题，您可以使用 css 转换来做到这一点

#whateverDiv{
    display: flex;
    left: 25%;
    transform: translateX(-50%)
}

【讨论】：

【解决方案2】：

也许可以试试“转换起源”？

div {
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    -ms-transform-origin: 50% 50%; /* IE 9 */
    transform-origin: 50% 50%;
}

【讨论】：