CSS：在水平和垂直方向上居中元素

Question

假设我有一个在HTML文档中使用绝对定位的div，如下所示：

<div style="position:absolute">Hello!</div>

现在假设我想要给它一个X和Y的值（可能通过JQuery实现）。这很容易，只需将“left”和“top”属性分别设置为X和Y。

然而，当X和Y需要成为此div的中心时，这个任务会变得更加困难。如果div的大小不能保证始终相同，则不能仅仅将X和Y偏移适当的量。

如果可能的话，如何将div的中心设置为特定的X和Y？如果有帮助的话，这些div仅包含文本，没有子元素。

我更喜欢使用CSS而不是JavaScript，但如果必要的话，我也可以接受。

- Blake Doeren

---

需要将 div 居中在视口中吗？ - guest271314

你可以通过计算得出中心坐标：childDiv.left = parentDiv.width / 2 - childDiv.width / 2 和 childDiv.top = parentDiv.height / 2 - childDiv.height / 2。 - Mr. Polywhirl

如果 div 的大小不能保证始终相同，那么就无法简单地偏移 X 和 Y 到相应的位置。为什么呢？如果你已经使用 JS，可以使用它获取当前元素的宽度和高度，并进行非常简单的数学计算。使用 margin-top/-left (+/-) 50% 也可能作为纯 CSS 解决方案。 - CBroe

Answer 1

有两种方法可以使一个 div 垂直水平居中：

方法1：绝对定位

#box {
  position: absolute;
  left: 50%; /* relative to nearest positioned ancestor or body element */
  top: 50%; /*  relative to nearest positioned ancestor or body element */
  transform: translate(-50%, -50%); /* relative to element's height & width */
}

演示：http://jsfiddle.net/19pu1g72/

方法二：Flexbox

body {
    display: flex; /* establish flex container */
    justify-content: center; /* center flex items horizontally, in this case */
    align-items: center; /* center flex items vertically, in this case */
}

演示：http://jsfiddle.net/19pu1g72/1/

- Michael Benjamin

---

不确定你为什么编辑了第一个方法，因为translate（-50％，-50％）正好按照我的要求工作。我觉得你误解了我的问题，如果必要的话，我可以进一步解释。我希望左边和顶部是可变的，不一定是50％。如果你编辑你的答案反映这一点，我会接受它。 - Blake Doeren

我并没有改变代码，只是添加了带有解释的注释。 - Michael Benjamin

Answer 2

尝试使用calc()，将left设置为50% - /* element width */ / 2，将top设置为50% - /* element height */ / 2。

div {
  width:100px;
  height:24px;
  top:calc(50% - 24px / 2);
  left:calc(50% - 100px / 2);
}

<div style="position:absolute">Hello!</div>

- guest271314

---

还要提到对 calc() 的支持。 - Rayon

这是一个合法的解决方案，如果您知道div的确切大小。问题在于我不一定知道div的确切大小，因此需要另一种方法。接受的答案使用了translate(-50％，-50％)，它按照我想要的方式工作。 - Blake Doeren