div内的元素垂直居中和水平居中

最新推荐文章于 2023-09-11 18:44:00 发布

无关痛痒qaq

最新推荐文章于 2023-09-11 18:44:00 发布

阅读量459

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43655835/article/details/107763302

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近自己没事写一些前端的东西玩玩儿，经常会有将div中的元素进行垂直居中或者水平居中的需求，所以这里记录一下自己最常用的方法:

效果显示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
    .div_body{
        background-color: bisque;
        width: 350px;
        height: 450px;
        border-radius: 10px;
        /* 1.将容器设置 display 为flex */
        display: flex;
        /* 2.设置垂直居中 */
        align-items: center;
        /* 3.设置水平居中 */
        justify-content: center;
    }
.login{
    background-color: red;
    height: 20px;
}

</style>
    </head>
    <body>
        <div class="div_body">


            <div class="login">
                这是测试div
            </div>



        </div>
    </body>
</html>