小绵杨Yancy 2021-07-08 20:14 采纳率: 100%
浏览 41
已采纳

<!DOCTYPE html>为什么会影响flex居中？

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        display: flex;
        align-items: center;
        /*定义body的元素垂直居中*/
        justify-content: center;
        /*定义body的里的元素水平居中*/
    }

    .div {
        width: 100px;
        height: 100px;
        background-color: black;
    }
</style>

<body>
    <div class="div">
    </div>
</body>

</html>

去掉就可以实现水平竖直居中了，但是加上就只能实现水平居中，不能理解。

  • 写回答

1条回答 默认 最新

  • 404警告 2021-07-08 20:27
    关注

    改成如下代码

    <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
        body {
            /*position:fixed;*/
            display: flex;
            /*定义body的元素垂直居中*/
            justify-content: center;
            /*定义body的里的元素水平居中*/
            height: 100%;
            width: 100%;
            position: absolute;
            align-items: center;
        }
        
        .div {
            width: 100px;
            height: 100px;
            background-color: black;
            align-items: center;
        }
    </style>

    <body>
        <div class="div">
        </div>
    </body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已采纳回答 7月9日