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,观察

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读