如何使div垂直居中，以及水平居中

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

lianflower

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

阅读量116

点赞数

原文链接：https://stackoverflow.com/questions/2743989/how-to-vertically-center-divs

版权

Css 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

工具使用技巧

9 篇文章 0 订阅

订阅专栏

详见
https://stackoverflow.com/questions/2743989/how-to-vertically-center-divs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /*使div1垂直居中，且水平居中*/
        html, body {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center
        }

        /*使div1中嵌套的div2垂直居中，且水平居中*/
        #div1 {
            display: flex;
            align-items: center;
            justify-content: center
        }

        /*使div2中的内容垂直居中，且水平居中*/
        #div2 {
            display: flex;
            align-items: center;
            justify-content: center
        }
    </style>
</head>
<body>
    <div id="div1" style="width: 500px;height: 300px;border: solid 1px red;">
        <div id="div2" style="width: 60%;height: 30%;border: solid 1px green;">11</div>
    </div>
</body>
</html>

顺便再说一下：stackoverflow上的问答真的很专业牛掰，推荐大家在遇到问题时首先去stackoverflow。
英文不好也没关系，可以借助翻译软件。
我英文也不好，所以以前遇到问题时，基本不会去stackoverflow，但后来慢慢发现，大部分的问题都能在stackoverflow上找到答案。