javascript - CSS:x 和 y 上的中心元素

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，但如果有必要，我会接受。

Answer 1

将 div 垂直和水平居中的两种方法:

方法一:绝对定位

#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/