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

Posted 2023-03-05

【中文标题】在页面中垂直和水平居中 DIV [重复]

【英文标题】：Center DIV vertically and horizontally in page [duplicate]

【发布时间】：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

它居中，但相对于其容器的位置：相对

【参考方案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