Html 小于浏览器高度时垂直居中div（引导）_Html_Css_Bootstrap 4

Html 小于浏览器高度时垂直居中div（引导）

html css bootstrap-4

Html 小于浏览器高度时垂直居中div（引导）,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在使用CSS引导4，容器中每行有多个列。根据屏幕大小，这些列可以堆叠在一起，使容器更高，有时超出屏幕显示的范围，需要滚动。我似乎想不出一个方法来满足这两个条件：如果容器短于浏览器窗口高度，则将容器置于屏幕中部如果容器的高度高于浏览器窗口的高度，请不要将容器居中（以便它不会离开屏幕）我有代码将下面的容器居中，但当文本行数超过屏幕时，它会由于.centered而脱离屏幕，无法像正常页面那样滚动这是我的HTML： <div class="container centered" s

我正在使用CSS引导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>

居中的固定位置将其从正常页面流中移除，从而使页面不会滚动。使用以下工具将更容易将其居中：
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;
}


或者，使用引导类获得相同的结果：
<body class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="container">
        I'm centered...
    </div>
</body>


我是居中的。。。

（或）
CSS没有容器查询，只有媒体查询。这不能用CSS解决，只能用Javascript解决。不鼓励在StackOverflow上使用外部代码托管站点，如JSFIDLE、codepen等。请使用SO提供的代码段功能。您是正确的，没有关于此的正式声明。我非常同意应该有一个，我和这是同一条船。
<body class="d-flex align-items-center justify-content-center min-vh-100">
    <div class="container">
        I'm centered...
    </div>
</body>

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