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

Question

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

• 如果容器短于浏览器窗口高度，则将容器居中放置在屏幕中间
• 如果容器高于浏览器窗口高度，不要将容器居中（以免它离开屏幕）

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

这是我的 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);
}

Answer 1

我正在使用CSS引导程序4，容器内每行有多列。 根据屏幕大小，这些列可以彼此堆叠，并使容器更高，有时甚至超出了屏幕上显示的范围，需要滚动。 我似乎无法找出一种方法来满足这两个条件：

• 如果容器的长度小于浏览器窗口的高度，则将其居中放在屏幕中间
• 如果容器的高度高于浏览器窗口的高度，请不要使容器居中（以使其不会离开屏幕）

我有将容器居中的代码，但是当文本的行数大于屏幕的高度时，由于居中，它会简单地离开屏幕，并且无法像普通页面一样滚动

这是我的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);
}

Answer 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>

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

Answer 3

我正在使用CSS引导程序4，容器内每行有多列。 根据屏幕大小，这些列可以彼此堆叠，并使容器更高，有时甚至超出了屏幕上显示的范围，需要滚动。 我似乎无法找出一种方法来满足这两个条件：

• 如果容器的长度小于浏览器窗口的高度，则将其居中放在屏幕中间
• 如果容器的高度高于浏览器窗口的高度，请不要使容器居中（以使其不会离开屏幕）

我有将容器居中的代码，但是当文本的行数大于屏幕的高度时，由于居中，它会简单地离开屏幕，并且无法像普通页面一样滚动

这是我的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);
}