Text-align:center 和 margin:0 auto 不适用于绝对定位的元素

Question

我试图将 div 居中对齐，但 text-align: center 和 margin: 0 auto 似乎都不适用于绝对定位元素。我假设两者都不适用于绝对定位的元素。在这种情况下，我应该怎么做呢？

#wrap {
  border: 1px solid black;
  position: relative;
  width: 500px;
  height: 250px;
  margin: 0 auto;
  text-align: center;
}
#absolute {
  border: 1px solid red;
  position: absolute;
  display: block;
  bottom: 0;
  margin: 0 auto;
  cursor: pointer;
}

<div id='wrap'>
  <div id='absolute'>Click Me</div>
</div>

Answer 1

因为您知道包装器的大小，您可以将 left: 250px（包装器大小的一半）添加到绝对定位元素的 css。

Answer 2

在不更改 HTML 的情况下，将元素水平居中的最简单方法是组合 left: 50% 和 transform: translateX(-50%)。这实际上会将元素 50% 定位到右侧，然后通过将其 -50% 转换到左侧来移动元素宽度的一半。这样做时，无论宽度如何，元素都将水平居中，这意味着您无需对任何值进行硬编码。

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

更新的代码段：

#wrap {
  border: 1px solid black;
  position: relative;
  width: 500px;
  margin: 0 auto;
  height: 80px;
}
#absolute {
  border: 1px solid red;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  bottom: 0;
  cursor: pointer;
}

<div id="wrap">
  <div id="absolute">Click Me</div>
</div>

或者，如果您可以更改 HTML，只需将 left: 0 和 right: 0 添加到绝对定位的元素元素，以便它采用父容器的宽度。然后你可以添加 text-align: center 以居中子元素：

更新的代码段：

#wrap {
  border: 1px solid black;
  position: relative;
  width: 500px;
  margin: 0 auto;
  height: 80px;
}
#absolute {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  text-align: center;
}
#absolute > span {
  border: 1px solid red;
  cursor: pointer;
}

<div id="wrap">
  <div id="absolute">
    <span>Click Me</span>
  </div>
</div>

Text-align:center 和 margin:0 auto 不适用于绝对定位的元素

Text-align:center and margin:0 auto not working on absolute positioned elements

html

javascript

css

jquery

css-position