html - 按中心点定位，而不是左上角

Question

是否可以告诉代码按元素的中心点而不是左上角点定位？如果我的 parent 元素有

width: 500px;

我的子元素有

/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;

假设基于 50% 定位，子元素将位于父元素的中间，每边留有 150px 的自由空间。然而，事实并非如此，因为它是子级的左上角，达到父级宽度的 50%，因此整个子级的宽度 200px 变为从那里开始右边，左边留有 250px 的可用空间，右边只有 50px。

那么，我的问题是，如何实现居中定位？

我找到了这个解决方案:

position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;

但我不喜欢它，因为您需要针对每个元素的宽度手动编辑它 - 我想要一些可以在全局范围内使用的东西。

(例如，当我在 Adob​​e After Effects 中工作时，我可以为一个对象设置一个位置，然后设置将放置到该位置的该对象的特定 anchor 。如果 Canvas 是 1280px 宽，您将对象定位到 640px 并选择对象的中心作为 anchor ，然后整个对象将在 1280px 宽的 Canvas 中居中.)

我会在 CSS 中想象这样的东西:

position: absolute;
left: 50%;
horizontal-anchor: center;

类似地，horizo​​ntal-anchor: right 会将元素定位在其右侧，因此整个内容将位于其父级 50% 点的左侧宽度。

而且，这同样适用于 vertical-anchor，你懂的。

那么，是否可以使用仅 CSS(无脚本)实现类似的功能？

谢谢!

Answer 1

如果元素必须绝对定位(因此，margin: 0 auto; 对居中没有用)，并且脚本是不可能的，您可以使用 CSS3 转换来实现。

.centered-block {
    width: 100px; 
    left: 50%; 
    transform: translate(-50%, 0); 
    position: absolute;
}

查看此 fiddle一些例子。重要部分:left: 50%; 将 block 推到其父级的一半(因此它的左侧位于 50% 标记处，如您所述)。 transform: translate(-50%, 0); 沿 x 轴(即向左)将 block 拉回其宽度的一半 own ，这将放置它就在 parent 的中心。