如果将left和right都设置为零，并将left和right margin设置为auto，则可以使绝对定位的元素居中。

position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;

如果要在不知道元素的宽度和高度的情况下居中对齐元素，请执行以下操作：

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

示例：
x一个一个一个一个x一个一个二个x

我试试这个方法，效果很好

position: absolute;
left: 50%;
transform: translateX(-50%);

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

你试过使用吗？：

left:50%;
top:50%;
margin-left:-[half the width] /* As pointed out on the comments by Chetan Sastry */

不确定是否有效，但值得一试...

次要编辑：添加了左边距部分，正如Chetan在评论中指出的那样...

你所要做的就是确保你的父元素<div>有position:relative，并为你想要居中的元素设置一个高度和宽度。

.layer {
    width: 600px; height: 500px;
    display: block;
    position:absolute;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    margin:auto;
}

https://output.jsbin.com/aXEZUgEJ/1/

使用将父div移动到中间

left: 50%;
top: 50%;
margin-left: -50px;

使用将第二层移动到另一层上

position: relative;
left: -100px;

我还想分享另一种方法，如果您正在从头开始构建一些东西，它可能会很有用。
我也遇到了同样的情况，但是当我使用上面的方法时，它不起作用，因为我在每个标签上都有一个类，当滚动时，它会改变背景。
我在Javascript上创建了一个方法，用于计算元素和viewport的大小，以便在每次viewport大小更改时正确定位。

function setOnCenter(element) {
  let elm = $("#" + element);
  let currentlyViewportWidth = $(window).width();
  let unitWidthViewport = currentlyViewportWidth / 100;
  let pxSizeText = elm.outerWidth();
  let percentSizeText = pxSizeText / unitWidthViewport;
  let halfPercentSizeText = percentSizeText / 2;
  let result = 50 - halfPercentSizeText;

  elm.css({ width: pxSizeText + 'px', left: result + '%'});
}

window.addEventListener("resize", function (event) {
  setOnCenter('stuff_text');
})

当然，setOnCenter方法必须在文档准备好时执行。如果有什么需要改进的地方，我很乐意阅读它。