在页面中垂直和水平居中 DIV [重复]答案

【问题标题】：Center DIV vertically and horizontally in page [duplicate]在页面中垂直和水平居中 DIV [重复]
【发布时间】：2021-03-10 06:14:27
【问题描述】：

我正在尝试将 DIV 在页面中垂直和水平居中：

* {
  box-sizing: border-box;
}

div.wrapper {    
  border: 1px solid red;
  position: relative;
}

div.window {
  border: 1px solid blue;
  max-width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
  <div class="window">
    Sed blandit augue quis diam tristique fringilla. Morbi tortor leo, efficitur sit amet ultrices non, lacinia ut nunc. Donec ut odio a diam semper consequat quis in leo. 
  </div>
</div>

不知何故，这不是垂直居中的。我做错了什么？

【问题讨论】：

指定.wrapper高度为min-height: 100vh
您的包装器没有任何高度，因为您将孩子定位为绝对。
这能回答你的问题吗？ Vertically center two elements within a div
它居中，但相对于其容器的位置：相对

标签： html css

【解决方案1】：

这是因为wrapper div 中的position: relative。没有它，它可以正常工作。

div.wrapper {
  border: 1px solid red;
}

div.window {
  border: 1px solid blue;
  max-width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="wrapper">
  <div class="window">
    Sed blandit augue quis diam tristique fringilla. Morbi tortor leo, efficitur sit amet ultrices non, lacinia ut nunc. Donec ut odio a diam semper consequat quis in leo.
  </div>
</div>

【讨论】：

包装器应该围绕窗口，否则红色边框将无法正确呈现，这不是实际答案，因为包装器需要最小高度。如果指定，它看起来很合适。

【解决方案2】：

如果你只是想居中，我会推荐使用display: flex; 而不是绝对定位。

类似：

* {
  box-sizing: border-box;
}

div.wrapper {
  min-height: 100vh;
  border: 1px solid red;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.window {
  border: 1px solid blue;
  max-width: 300px;
}

<div class="wrapper">
  <div class="window">
    Sed blandit augue quis diam tristique fringilla. Morbi tortor leo, efficitur sit amet ultrices non, lacinia ut nunc. Donec ut odio a diam semper consequat quis in leo.
  </div>
</div>

此处的代码笔示例：https://codepen.io/bj-rn-nyborg/pen/OJRJawN

【讨论】：