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

在不更改HTML的情况下，水平居中元素的最简单方法是合并left: 50%和transform: translateX(-50%)。这将基本上将元素50%置于右侧，然后通过将元素-50%转换为左侧来替换元素宽度的一半。这样，无论宽度如何，元素都将水平居中，这意味着您不需要对任何值进行硬编码。

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

更新了代码段：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

更新了代码段：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

由于您知道包装器的大小，因此您只需将left: 250px（包装器大小的一半）添加到绝对定位元素的css中。

文本对齐：居中和边距：0自动无法处理绝对定位元素

2 个答案: