html 元素中心点改变,html – 按中心点排列,而不是左上角

可以通过元素的中心点而不是左上角来指示代码的位置？

如果我的父元素有

width: 500px;

和我的孩子元素有

/*some width, for this example let's say it's 200px*/

position: absolute;

left: 50%;

人们会认为,基于50％的定位,子元素将位于父项的中间,每侧留下150px的可用空间.但是,不是,因为它是父母宽度的50％的左上角,所以整个小孩的宽度为200像素,从左到右,剩下250像素的可用空间,只有50px在右边.

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

我发现这个解决方案：

position: absolute;

width: 200px;

left: 50%;

margin-left: -100px;

但我不喜欢它,因为您需要手动编辑每个元素的宽度 – 我想要的东西在全球工作.

(例如,当我在Adobe After Effects中工作时,我可以为一个对象设置一个位置,然后设置该对象的特定锚点,该对象将被放置到该位置.如果画布宽为1280px,则将对象定位到640px并且您选择对象的中心作为您的锚点,则整个对象将以1280px宽的画布为中心.)

我会想到这样的CSS在CSS：

position: absolute;

left: 50%;

horizontal-anchor: center;

类似地,horizo​​ntal-anchor：right将元素定位在其右侧,因此整个内容将从父级的50％宽度到左侧.

而且,垂直锚也适用,你得到它.

所以,这样可能只使用CSS(无脚本)？

谢谢！