按中心点定位,而不是左上角

Question

是否可以通过元素的中心点而不是左上角来告诉代码？如果我的父元素有

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;

但我不喜欢它,因为你需要为每个元素的宽度手动编辑它 - 我想要一些全局工作的东西.

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

我会在CSS中想象这样的事情:

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

类似地,horizontal-anchor: right将元素放置在右侧,因此整个内容将从其父级50%宽度的点开始向左.

并且,同样适用vertical-anchor,你得到它.

那么,这样的事情可能只使用CSS(没有脚本)吗？

谢谢!

Answer 1

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

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

在一些例子中看到这个小提琴.重要的部分:left: 50%;在其父母的中途推动阻挡(所以它的左侧是50%标记,正如你所提到的).transform: translate(-50%, 0);将块的自身宽度沿x轴(即向左)拉回一半,这将把它放在父母的中心.

请注意,这不太可能是跨浏览器兼容的,并且仍然需要对旧浏览器进行某种回退.

Answer 2

这是将文本元素居中放置在容器中间的一种方法（以标题为例）

CSS：

.header {
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
}

它以中间锚点为中心。