当小于浏览器高度时垂直居中 div (Bootstrap)答案

【问题标题】：Vertically center div when smaller than browser height (Bootstrap)当小于浏览器高度时垂直居中 div (Bootstrap)
【发布时间】：2021-12-07 22:20:21
【问题描述】：

我正在使用 CSS bootstrap 4，容器内每行有多个列。根据屏幕大小，这些列可以堆叠在一起，使容器更高，有时超出屏幕上可以显示的内容，需要滚动。我似乎无法找到同时满足这两个条件的方法：

如果容器小于浏览器窗口高度，则将容器置于屏幕中间
如果容器比浏览器窗口的高度高，不要将容器居中（这样它就不会离开屏幕）

我有代码使下面的容器居中，但是当文本的行数变得比屏幕高时，它会因为 .centered 而离开屏幕，并且不能像普通页面一样滚动

这是我的 HTML：

<div class="container centered" style="width: 100%">
    <div class="row justify-content-center">
            <div class="col-8" id="main">
                Text<br>
                Text<br>
                Text<br>
                <!-- Any number of more lines may be added here -->
            </div>
    </div>
</div>

还有我的 CSS：

html,
body {
  width: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: rgb(0, 0, 0);
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#main {
  background-color: rgb(30,29,38.3);
  border-radius: 6px;
  box-shadow: 0 0 30px rgb(25, 25, 35);
}

【问题讨论】：

CSS 没有容器查询，只有媒体查询。这不能用 CSS 解决，只能用 Javascript。

标签： html css bootstrap-4

【解决方案1】：

<body class="d-flex justify-content-center align-items-center"></body>

（或）

     `.body
      { 
        display:flex;
        justify-content:center;
        align-items: center; 
        height: 100vh;
      }`

【讨论】：

【解决方案2】：

我相信这会解决你的问题（我只使用了 CSS），你可以在第一行和最后一行之间添加文本行来测试我的解决方案：

*{
  box-sizing: border-box;
}
body {
  /* improtant lines */
  display: grid;
  align-items: center;
  min-height: 100vh;
  overflow-y: auto;
  /* improtant lines */
  background-color: rgb(0, 0, 0);
  margin: 0;
}

.centered {
  /* improtant lines */
  display: grid;
  align-items: start;
  /* improtant lines */
  padding: 1em 2em;
}

#main {
  background-color: rgb(30,29,38.3);
  border-radius: 6px;
  box-shadow: 0 0 30px rgb(25, 25, 35);
  color: white;
  padding: 1em;
}

<div class="centered">
      <div id="main">
          First Text<br>
          Text<br>
          Text<br>
          Text<br>
          Text<br>
          Text<br>
          Text<br>
          Last Text<br>
      </div>
</div>

说明：我在 body 中添加了一个网格显示，并使其子元素垂直居中，然后为“.centered”元素本身添加了一个网格显示，并在开始时垂直对齐其项目。

【讨论】：

【解决方案3】：

centered 上的固定位置将其从正常的页面流中移除，这使得页面无法滚动。使用以下方法将其居中会更容易：

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgb(0, 0, 0);
  justify-content: center;
  min-height: 100vh;
}

https://codeply.com/p/tUejIBKi12

或者，使用 Bootstrap 类获得相同的结果：

<body class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="container">
        I'm centered...
    </div>
</body>

【讨论】：

不鼓励在 StackOverflow 上使用 jsfiddle、codepen 等外部代码托管站点。请使用 SO 提供的 sn-p 功能。
你说得对，官方对此没有任何说法。我非常同意应该有一个，我和这个meta.stackoverflow.com/a/302293/3744304在同一条船上。