将div垂直居中放在另一个div中，高度为100％

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