html div 盒子上下垂直居显示

程序员鱼丸

2024-04-14 帮助1人

前言

日常开发中经常遇到内容水平与垂直居中，不管是文字、图片，我们都把它们放进一个 div 盒子里来操作。

画一个盒子

<!DOCTYPE html>
<html lang="en">
    <body>
        <div class="child"></div>
    </body>
    <style>
        html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
            background-color: #457b9d;
            box-sizing: border-box;
        }
        body {
            padding: 0;
            margin: 0;
        }
        .child {
            background-color: #1d3557;
            width: 200px;
            height: 200px;
        }
    </style>
</html>

初始盒子展示

学新通

使用 flex 居中盒子

在父容器里面增加如下代码

            display: flex;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            justify-content: center;

具体如下

        html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100vh;
            background-color: #457b9d;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
        }

效果图
学新通

这篇好文章是转载于：学新通技术网

html div 盒子上下垂直居显示

前言

画一个盒子

使用 flex 居中盒子

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐