位置由中心点，而不是左上点 [英] Position by center point, rather than top-left point

问题描述

是否有可能通过元素的中心点而不是左上角来指定代码的位置？
如果我的父元素有

  width：500px; 
  

和我的子元素

  / *一些宽度，对于这个例子，我们说它是200px * / 
 position：absolute; 
 left：50％; 
  

可以假设基于 50％定位，子元素将位于父对象的中间，每边留下 150px 的可用空间。然而，它不是，因为它是孩子的​​左上点去 50％的父的宽度，因此整个孩子的宽度<​​code> 200px 向右移动，在左侧留出 250px 的可用空间，只有 50px




因此，我的问题是，如何实现中心定位


我发现这个解决方案：

  position：absolute; 
 width：200px; 
 left：50％; 
 margin-left：-100px; 
  

但我不喜欢它，因为你需要手动编辑每个元素的宽度 -

（例如，当我在Adobe After Effects中工作时，我可以为对象设置位置，然后设置该对象的特定锚点如果画布是 1280px 宽，您将一个对象定位到 640px ，然后选择对象的中心为你的锚点，那么整个对象将在 1280px 宽画布中居中。）

我会想象这样的CSS：

  position：absolute; 
 left：50％; 
 horizo​​ntal-anchor：center; 
  

同样， horizo​​ntal-anchor：right 将元素放在右边，所以整个内容将在父元素 50％宽度的左边。

并且，同样适用于 vertical-anchor ，你会得到它。

谢谢！

解决方案

如果元素必须绝对定位（因此， 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轴将块的一半拉回 ），它将它放在父对象的中心。

请注意，这不太可能是跨浏览器兼容的，并且仍然需要退回一些为旧浏览器排序。

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has

width: 500px;

and my child element has

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

one would assume that based on the 50% positioning, the child element will be in the middle of the parent, leaving 150px of free space on each side. However, it is not, since it is the top-left point of the child that goes to 50% of the parent's width, therefore the whole child's width of 200px goes to the right from there, leaving 250px of free space on the left and only 50px on the right.

So, my question is, how to achieve center positioning?

I found this solution:

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

but I don't like it because you need to edit it manually for each element's width - I would like something that works globally.

(For example, when I work in Adobe After Effects, I can set a position for an object and then set specific anchor point of that object that will be put to that position. If the canvas is 1280px wide, you position an object to 640px and you choose the center of the object to be your anchor point, then the whole object will be centered within the 1280px wide canvas.)

I would imagine something like this in CSS:

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

Similarly, horizontal-anchor: right would position the element by its right side, so the whole content would be to the left from the point of its parent's 50% width.

And, the same would apply for vertical-anchor, you get it.

So, is something like this possible using only CSS (no scripting)?

Thanks!

解决方案

If the element must be absolutely positioned (so, margin: 0 auto; is of no use for centering), and scripting is out of the question, you could achieve this with CSS3 transforms.

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

See this fiddle for some examples. The important parts: left: 50%; pushes block halfway across its parent (so its left side is on the 50% mark, as you mentioned). transform: translate(-50%, 0); pulls the block half it's own width back along the x-axis (ie. to the left), which will place it right in the center of the parent.

Note that this is unlikely to be cross-browser compatible, and will still require a fall back of some sort for old browsers.

这篇关于位置由中心点，而不是左上点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！