jquery - 如何使用 CSS 或 CSS + jquery 在页面上垂直和水平对齐 div 容器？

Question

我确定以前有人问过这个问题，但我能找到的所有问题都太复杂了。真的很简单，我如何将 div 容器水平和垂直对齐到页面的中心和中间，以便在调整页面大小时它也保持在那里。

我所需要的只是一个空白的浏览器窗口，其中的 div 在调整窗口大小时始终位于屏幕中央，无论如何。使用 margin:auto 水平对齐非常容易，但垂直对齐似乎很麻烦。

许多“解决方案”要求首先设置 div float 的高度。我相信必须有更简单的方法...

Answer 1

flex 盒方式:

FIDDLE (调整浏览器窗口大小))

标记

<div class="container">
    <div class="child"></div>
</div>

CSS

.container {
    width: 80vw;
    height: 80vh;
    display:flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
    background: aqua;
}
.child {
    width: 50%;
    height: 50%;
    background: crimson;
}