如何将固定在另一个上的 div 居中？答案

【问题标题】：How to center a div fixed over another?如何将固定在另一个上的 div 居中？
【发布时间】：2017-12-12 11:19:51
【问题描述】：

我正在尝试将 div (overlay) 居中。我设法将它在div 居中。但是当父级的内容滚动时它会被切断并且不会粘在中心。不幸的是，overlay 不能只设置为固定：https://stackoverflow.com/a/20621323/1981832。

到目前为止，这是我的代码：

https://codepen.io/anon/pen/PjyYwV

.parent {
  position: relative;
  height: 50px;
  width: 200px;
  border: 1px solid blue;
  white-space:nowrap;
  overflow: scroll;
}

.overlay {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div class="parent">
  <div class="overlay"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

【问题讨论】：

标签： css overflow css-position overlay centering

【解决方案1】：

找到了获得我想要的东西的方法。但是，我认为它并不理想，因为它需要一个额外的 wrapper 元素。

.parent {
  position: relative;
  height: 50px;
  width: 200px;
  border: 1px solid blue;
  white-space:nowrap;
  overflow: scroll;
}

.wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}

.overlay {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100px;
  width: 100px;
  background-color: red;
  z-index: 100;
}

<div class="wrapper">
  <div class="overlay"></div>
  <div class="parent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>

【讨论】：

【解决方案2】：

您可以为此使用 flexbox。此外，您还必须添加将占据内容宽度和高度的包装器并将文本移动到某个标签（即span）：

.parent {
  height: 50px;
  max-width: 200px;
  border: 1px solid blue;
  white-space: nowrap;
  overflow: scroll;
}

.flex {
  position: relative;
  display: inline-flex; /* Width fit content */
  min-width: 100%; /* Not less than parent's width */
  min-height: 100%; /* Not less than parent's height */
  justify-content: center; /* Center items horizontally */
  align-items: center;  /* Center items vertically */
}

.overlay {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: red;
}

<div class="parent">
  <div class="flex">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
      <div class="overlay"></div>  
  </div>
</div>

【讨论】：

谢谢。我从未使用过flexbox。但是，它似乎不起作用。覆盖仍然（1）在水平滚动时不会粘住并且（2）被切断。父级的文本内容也以不同的方式垂直对齐。
不，这似乎是一种误解。我希望它粘在中心。但我评论说，在你的第一个建议中它没有。