css - 将一个 div 在另一个高度为 100% 的 div 中垂直居中

Question

我想将一个 div 置于高度为 100% 的 div 中。基本上主要的 div 出现在网站之前。我上传了一张图片，这样您可以更好地理解我想做什么。

Answer 1

如果使用 CSS Flexbox是一个选项，您可以简单地通过将容器显示为 flex 框并在中间(水平和垂直)对齐内部 div 来实现，如下所示:

EXAMPLE HERE

#intro {
    height: 100%; /* Or 100vh */

    display: flex;
    align-items: center;     /* Align the inner div vertically */
    justify-content: center; /* Align the inner div horizontally */
}

在这个例子中，align-items和 justify-content将使内部 div 垂直和水平显示在 #intro 的中间。

通过添加供应商前缀，它应该也适用于 IE 10。 (我在演示中使用了 Autoprefixer)。

然而，为了支持旧的网络浏览器，请尝试这种方法(查看垂直对齐部分):

• > Vertically align an image inside a div with responsive height