个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-03 19:24:48 24 4
gpt4 key购买 nike

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

最佳答案

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

(或)

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

关于html - 小于浏览器高度时垂直居中 div (Bootstrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59123704/

24 4 0
文章推荐： c# - 克隆以通过构造函数设置此对象的属性
文章推荐： python - 使用Python 2.7的vcvarsall.bat无法使用pip安装fabric
文章推荐： python - 在 Python 3 中与 3D 对象交互？
文章推荐： css - 怎么改变一个单词的前三个字母
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com