在中心位置定位HTML元素

Question

如何根据中心点定位HTML元素？

在这个例子中：

  XXXXXXXXX
      |
      |
     123px

假设元素应该在绝对位置 left: 123px;，但文本应该在该点居中，而不是从该点开始。元素文本是动态的，所以我无法在其上设置静态负值 margin-left。

有没有一种纯CSS的方法来实现这一点？由于各种限制，通过测量 offsetWidth 然后计算 width / 2 并设置 left 的JS方式可能无法在我的情况下起作用。

- Yuval Adam

---

也许可以使用负边距技术来使你的内容居中，或者你还可以对文本应用另一个负边距来获得你想要的居中效果。详情请见：http://web.archive.org/web/20050204013909/http://bluerobot.com/web/css/center2.html - albert

尝试在您的帖子中添加 jsfiddle ^_^ ! - solimanware

@Albert，请看我的更新，这是一个动态元素。 - Yuval Adam

我已经想到了，但还是想尝试一下那种技巧。也许有一种方法可以实现你想要的。按照 @Microsmsm 的建议创建一个 fiddle 让我们一起调试。 - albert

Answer 1

一种可能的方法是设置 transform 属性的 translateX 值为 -50%。

p {
  position: relative;
  display: inline-block;
      left: 100px;
    transform: translateX(-50%);
}

<p>ONE</p>
<br>
<p>TWO, LONGER</p>
<br>
<p>THREE, the longest</p>

- vals

---

好的解决方案。我不知道translateX。 - CarlosCarucce

Answer 2

实现这个效果相对比较简单，有几种方法可以做到。由于您没有发布任何HTML构造示例，我将自己编写一些。

关键是要有一个内联块父元素，该元素具有所需的偏移量（123px），并在该元素内部具有另一个左边距为-50％的内联块元素。两者都相对定位即可获得所需的效果。

#container {
  position: relative;
}
#line {
  width: 100px;
  height: 100px;
  left: 123px;
  position: absolute;
  border-left: 1px solid red;
}
#text {
  left: 123px;
  top: 50px;
  display: inline-block;
  position: relative;
}
#text p {
  position: relative;
  background: green;
  margin-left: -50%;
  display: inline-block;
  color: #fff;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}

<div id="container">
<div id="line">
 &lt;-- 123px
</div>
<div id="text">
<p>
This is some dynamic text<br>the div has no absolute set width.
</p>
</div></div>

如前所述，还有其他方法，可能取决于您的一般布局/HTML结构。我肯定会查看flex-box属性，这也可能适用于此处。

如果您想尝试一下，请参考此处的示例。

- Paul

---

谢谢Paul，我独立找到了这个方法，但它绝对有效！ - Yuval Adam

Answer 3

以下是一些使用CSS实现的不同方法：

如果您的元素是块级元素：

.element{
    width: 200px; /* Full width */
    left: 50%;
    margin-left: -100px; /* Half width */
    position: absolute;
    display: block;
}

或者，如果您正在使用css3：

.element{
    width: 200px; /* Full width */
    left: calc(50% - 100px);
    position: absolute;
    display: block;
}

你也可以采用非绝对定位的方式，但父元素的位置必须是相对定位：

.element-parent{
    position: relative;
}

.element-parent .element{
    margin: 0 auto;
}

如果您使用文本定向元素（inline-block），则可以在IE 7+上使用：

.element-parent{
    text-align: center;
}

.element-parent .element{
    display: inline-block;
}

- CarlosCarucce

---

阅读问题*。假设该元素应该位于绝对位置left: 123px; 但文本应该在该点居中，而不是从该点开始。元素文本是动态的，因此我无法在其上设置静态负margin-left。 - dippas

在这种情况下，我认为 margin: 0 auto; 很适合。^^ - CarlosCarucce