當小於瀏覽器高度時垂直居中 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);
}