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;

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

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

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

谢谢！

如果元素必须绝对定位(因此,margin：0 auto;对于居中是没有用的),并且脚本是不成问题的,您可以通过CSS3转换实现这一点.

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

参见这个fiddle的一些例子.重要部分：左：50％;推动块在其父母的一半(所以它的左侧是50％的标记,如你所提到的). transform：translate(-50％,0);沿X轴(即左侧)将块的一半自身的宽度拉回,这将放在父母的中央.

请注意,这不太可能与浏览器兼容,并且仍然需要对旧版浏览器进行某种排序.

相关文章