使用元素中心定位元素？

Question

我正在尝试制作一个具有 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. */
}

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

Answer 1

如果可以的话，您可以使用 css 转换来做到这一点

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

Answer 2

也许试试'transform-origin'？

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

使用元素中心定位元素？

Position Element Using Center of Element?

html

css

position

absolute

flexbox