59

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

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;

但我不喜欢它，因为您需要为每个元素的宽度手动编辑它——我想要一些可以全局使用的东西。

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

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

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

同样，horizontal-anchor: right将元素定位在其右侧，因此整个内容将位于其父级50%宽度点的左侧。

而且，同样适用vertical-anchor，你明白了。

那么，这样的事情是否可能仅使用 CSS（无脚本）？

谢谢！

4

7 回答 7

79

如果元素必须绝对定位（因此，margin: 0 auto;对于居中没有用处），并且脚本是不可能的，您可以使用 CSS3 转换来实现这一点。

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

有关一些示例，请参见this fiddle。重要部分：left: 50%;将块推过其父级的一半（如您所述，它的左侧位于 50% 标记上）。将块沿 x 轴（即向左）拉回其自身transform: translate(-50%, 0);宽度的一半，这会将其放置在父级的中心。

于 2013-03-10T23:05:05.270 回答
6

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

CSS：

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

它以中间锚点为中心。

于 2018-07-24T14:40:33.367 回答
2

如果可以选择添加另一个元素，请考虑以下事项：

/* CSS for all objects */

div.object {
  width: 100%;
  height: 100%;
  position: absolute;
  left: -50%;
  top: -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */
}

div.anchor {
  position: absolute; /* (or relative, never static) */
}


/* CSS for specific objects */

div#el1 {
  /* any positioning and dimensioning properties for element 1 should go here */
  left: 100px;
  top: 300px;
  width: 200px;
  height: 200px;
}

div#el2 {
  /* any positioning and dimensioning properties for element 2 should go here */
  left: 400px;
  top: 500px;
  width: 100px;
  height: 100px;
}

div#el1>div.object {
  /* all other properties for element 1 should go here */
  background-color: purple;
}

div#el2>div.object {
  /* all other properties for element 2 should go here */
  background-color: orange;
}
<div class="anchor" id="el1">
  <div class="object">
  </div>
</div>
<div class="anchor" id="el2">
  <div class="object">
  </div>
</div>

本质上，我们所做的是设置一个对象来定义元素的位置、宽度和高度，然后在其中放置另一个对象，偏移 50%，并获取其父尺寸（即width: 100%）。

于 2014-04-21T13:24:37.990 回答
2

偶然发现了这个问题，我想添加另一种在 div 中居中内容的方法。

通过使用 CSS3 显示模式“灵活框”，如将以下 CSS 属性设置为父 div

display: flex;
position: relative;
align-items: center;
justify-content:center;

并且“至少”将以下属性设置为子 div

position:relative;

浏览器将自动将父 div 中的内容居中，不受其宽度或高度的影响，这在您开发图像网格之类的东西或只是想消除计算 div 位置的麻烦时尤其有用，然后不得不当您改变对上述 div 的设置的想法时，重新计算它。

在我自己的工作中，我倾向于设置一个名为

.center-center

使用我为父 div 描述的属性，然后只需将其添加到我需要其内容居中的任何元素中。

我创建了一个 JSFiddle 来支持这个解释，请随意点击红色方块以查看实际定位。

https://jsfiddle.net/f1Lfqrfs/

对于多行支持，您可以在父 DIV 中添加（或在 JSF 中取消注释）以下 CSS 属性

flex-wrap: wrap;
于 2017-04-26T07:52:27.147 回答
0

left:50% 并不是把这个 div 50% 的重心向左居中，它是左边框到父元素左边框的距离，所以基本上你需要做一些计算。

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ]

left = left / 2

所以你可以做一个Javascript函数......

function Position(var parentWidth, var childWith, var borderWidth)
{
      //Example parentWidth = 400, childWidth = 200, borderWidth = 1
      var left = (parentWidth - ( childWidth + borderWidth));
      left = left/2;
      document.getElementById("myDiv").style.left= left+"px";
}
于 2013-03-10T22:45:45.863 回答
0

我通过使用transform: translateXwithcalc来按元素中心而不是左上角进行水平定位来使其工作。垂直使用也可以使用相同的技巧transform: transformY。这适用于任何类型的宽度（尝试调整大小）

片段：transform: translateX(calc(-50% + 223px));

浏览器支持：https://caniuse.com/#feat=transforms2d , https://caniuse.com/#feat=calc

Codepen 更多示例：https ://codepen.io/manikantag/pen/KJpxmN

关于 offsetLeft/offsetTop 等的注意事项：el.offsetLeft不会为 CSS 转换的元素提供适当的值。您需要类似的东西el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft （如此处所述）

关于流动效果的注意事项：正如CSS Things That Don't Occupy Space中详述的那样，transform 不会影响后面的元素，而不考虑由 transform 引起的偏移量。有时这可能不是预期的行为。如果宽度/高度是固定的，这可以使用负边距来修复（如果宽度/高度正在使用则不起作用%）

.left-positioned {
  margin-left: 223px;
  background-color: lightcoral;
}

.center-positioned {
  transform: translateX(calc(-50% + 223px)); /*=====> actual solution */
  background-color: cyan;
}

.with-width {
  width: 343px;
  background-color: lightgreen;
}


/* styles not related to actual solution */

div {
  resize: both;
  overflow: auto;
}

.container {
  background-color: lightgray;
}

.ele {
  display: inline-block;
  height: 70px;
  text-align: center;
}
<div class="container">
  <div class="ele left-positioned">Reference element (left at 223px)</div> <br/>
  <div class="ele center-positioned">^<br/>Center positioned element (center at 223px)</div> <br/>
  <div class="ele center-positioned with-width">^<br/>Center positioned element with width (center at 223px)</div>
</div>

于 2019-01-24T09:54:32.120 回答
0

transform您可以使用属性和translate函数移动元素，使其中心与指针处于相同位置，如下所示：

transform: translate(-50%, -50%);

这相当于：

transform: translateX(-50%) translateY(-50%);

这会将元素在 X 和 Y 轴上向后移动一半长度，因此它的中心将位于放置它的指针上方。

中心示例

例如，如果您想将一个元素放在其父元素的中心，您首先将指针放在中心，如下所示：

left: 50%
top: 50%

然后添加转换以将元素的中心移动到指针上，如下所示：

left: 50%
top: 50%
transform: translate(-50%, -50%);

感谢Joe Rhoney，2019 年建议transform在先前答案的评论中使用。

于 2021-06-24T13:57:32.550 回答