CSS-元素页面水平垂直居中显示

问题描述

目标页面效果如下：

目前页面效果如下：

为什么呢？让我们来看下源代码

代码展示

问题代码：

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 2rem;
 background: #018ded;
 display: flex;
 align-items: center;
 flex: 1;
}
 
.clock {
 margin: 50px auto;
 height: 30rem;
 width: 30rem;
 border-radius: 50%;
 border: white solid 20px;
 padding: 2em;
}

解决方案

我们在body里加一个min-height

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 2rem;
 background: #018ded;
 display: flex;
 align-items: center;
 flex: 1;
 min-height: 100vh; /*加一个min-height*/
}

为什么，一个div给一个min-height, 再align-items就能页面居中了，仅仅align-items却不行

回答: if you don’t set height value to an element, what is the height value. 想要给元素居中，首先要给元素高度和宽度（水平和居中）
你不设置高度，父亲的高度，就等于子的高度，为啥没局中？实际上人家已经局中了，只是父亲没有高度，或者说父亲的高度在视觉上没有等于你看见的浏览器的窗口的高度。

小tip：每个板块搞不懂情况的时候，加个 background-color，观察