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垂直和水平居中的两种方法：

方法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/

方法2：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/