Question

我正在我的应用程序中显示一个模态，它被固定在占据整个窗口的绝对定位容器中。

类似这样的东西：

<div>
  <div class="modalWrap">
    <div class="modalContent">
      howdy slick willy
    </div>
  </div>
</div>

.modalWrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: pink;
}

.modalContent {
  width: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 15px;
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

https://jsfiddle.net/513m6kte/3/

当容器设置为占据整个窗口宽度（right: 0）时，它起作用。但是，我有一个用例，其中聊天窗口可能是从右侧进入的，因此我需要容器不占用整个宽度。只需将容器上的right设置为250px即可轻松实现，但是模态内容将不再居中。

当容器的宽度变化时，如何使模态保持在.modalWrap的中心？

Answer 1

使用flexbox，还有一个更简单的解决方案。

Flexbox相对较新，但是非常有用-相当容易。从Bootstrap3到Bootstrap4的核心更改是从与浮动对齐转变为使用Flexbox，这是有原因的。 事实上，他们围绕flexbox重新设计了整个Bootstrap网格系统-Bootstrap的核心。

通过将这两行添加到父div：

display:flex;
justify-content:center;

并从子div中删除这两行（模式内容）：

xxxleft: 50%;
xxxtransform: translateX(-50%);

模态将自动调整，并始终保持居中。

Updated jsFiddle Demo

参考文献：

Excellent, fast-paced 5-min Flexbox Tutorial

Best Ever Flexbox Cheat Sheet

Answer 2

以下是我使用过的关于居中的终极指南：https://css-tricks.com/centering-css-complete-guide/

这将遍历所有以问答格式居中的选项。

如何在固定位置的父对象中水平放置固定内容？

2 个答案:

参考文献：