可以通过元素的中心点而不是左上角来指示代码的位置？
如果我的父元素有
如果我的父元素有
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轴(即左侧)将块的一半自身的宽度拉回,这将放在父母的中央.
请注意,这不太可能与浏览器兼容,并且仍然需要对旧版浏览器进行某种排序.
