Css 垂直对准大电机

我想在屏幕上垂直对齐我的jumbotron，当用户导航到它时，无论屏幕大小如何，我希望能够向下滚动，它不会随着屏幕移动 如果可能的话，我想使用内联样式

<div class="jumbotron text-center">
            <h1>Search Form Here</h1>
        </div>

在这里搜索表单

您可以使用jQuery来实现这一点，顺便说一句，它创建了内联CSS

您的HTML加上一个包含

div

：

<div class="wrapper">
    <div class="jumbotron text-center">
        <h1>Search Form Here</h1>
    </div>
</div>

在文档准备就绪时调用函数：

$(document).ready(function() {
    myJumbotron();
});

---

您可以在没有jQuery的情况下完成这项工作。首先将jumbotron放入包装器中：

<div class="wrapper">
    <div class="jumbotron text-center">
        <h1>Search Form Here</h1>
    </div>
</div>

最后，使用绝对定位和变换使jumbotron居中：

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

---

您可以制作所需的jumbotron、高度和宽度，它将始终位于容器的中心。所有这些样式都可以是内联的，只需将它们移动到各自div上的样式属性即可。值永远不需要更改。

我使用CSS Flexbox解决了这个问题。没有Javascript或jQuery

这是我的代码，我在CSS文件中添加了类

vertical center

-

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

---

你可以在-

上看到一个例子，你是说让jumbotron具有类似于

位置：固定的
？像一个固定导航栏？不，我想能够滚动过去，你说的“…当用户导航到它时”是什么意思？在网址中键入…你应该更详细地描述你的要求和问题。该职位不清楚。
.jumbotron {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}