`<!DOCTYPE html>` 破坏了 body 标签中的 `justify-content: center`

Question

出于某种原因，在 body 标签中添加 <!DOCTYPE html> 中断 justify-content: center。这就像一个没有文档类型的容器占用了它所有的 space，而只有一部分。

body{
    background-color: rgb(249, 249, 249);
    font-family: "Segoe UI",Helvetica,Arial,sans-serif;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* containers */

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-container{
    text-align: center;

    border: solid 1px lightgray;

    background-color: white;

    width: 350px;
    min-height: 395px;
}
.registration-container{
    display: flex;
    justify-content: center;
    align-items: center;
    
    border: solid 1px lightgray;

    background-color: white;

    width: 350px;
    min-height: 60px;

    margin: 10px 0;

    color: rgb(40, 40, 40);
    font-size: 14px;
}

/* login-container */

.logo-insta{
    margin: 45px 0px 30px 0px;
}
.input-container{
    display: flex;
    flex-direction: column;
    
    align-items: center;

    margin: 0 20px;
}
.log-insta, .input-box{
    display: block;
    background-color: rgb(249, 249, 249);
    border: solid 1px lightgray;
    border-radius: 4px;
    
    width: 270px;
    margin: 3px;
    padding: 11px 8px;

    font-size: 12px;
}
.login-button{
    width: 270px;
    margin: 10px;

    color: white;
    font-weight: bold;
    font-size: 15px;
    background-color: rgb(0, 145, 255);
    border: none;
    border-radius: 4px;

    padding: 6px;
}
.or-container{
    color: gray;
    position: relative;
    margin: 10px 0;
}
hr{
    color: rgb(228, 227, 227);
    border-top: solid 1px;
    width: 270px;
}
.or{
    font-size: 14px;
    font-weight: 600;
    color: rgb(161, 161, 161);
    background-color: white;

    padding: 0 20px;
    
    position: absolute;
    top: -5px;
    left: 140px;
}
.login-facebook{
    display: flex;
    justify-content: center;

    color: rgb(25, 66, 131);
    font-size: 14px;
    font-weight: bold;

    margin-top: 42px;
    margin-bottom: 23px;
}
.login-facebook-img{
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.forget-password{
    color: rgb(25, 66, 131);
    font-size: 13px;
}

/* registration container */

.registration-text{
    color: rgb(0, 145, 255);
    font-weight: bold;
    margin-left: 4px;
}

/* install app */

.download-app-text{
    font-size: 14px;
    text-align: center;

    margin-top: 12px;
}
.download-app-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.download-app-img{
    width: 140px;
    margin: 20px 4px;
}

/* Hover */

.login-button:hover,
.login-facebook:hover,
.forget-password:hover,
.registration-text:hover,
.download-app-img:hover{
    cursor: pointer;
}

/* Active */

.login-button:active,
.login-facebook:active,
.forget-password:active,
.registration-text:active,
.download-app-img:active{
    opacity: 0.7;
}

<!DOCTYPE html>
<html lang="ru">
<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">
    <link rel="stylesheet" href="/login.css">
    <title>Instagram</title>
</head>
<body>
    <div class="container">
        <div class="login-container">
            <img class="logo-insta" src="https://www.instagram.com/static/images/web/logged_out_wordmark.png/7a252de00b20.png">
            <div class="input-container">
                <input class="input-box" type="email" placeholder="Телефон, имя пользователя или эл. адрес">
                <input class= "input-box" type="password" placeholder="Пароль">
            </div>
            <button class="login-button">Войти</button>
            <div class="or-container">
                <hr/>
                <div class="or">ИЛИ</div>
            </div>
            <div class="login-facebook">
                <img class="login-facebook-img" src="/login-imgs/login-facebook.jpg">
                <div>Войти через Facebook</div>
            </div>
            <div class="forget-password">Забыли пароль?</div>
        </div>
        <div class="registration-container">
            <div>У вас ещё нет аккаунта?</div>
            <div class="registration-text">Зарегестрироваться</div>
        </div>
        <div class="download-app-text">Установите приложение.</div>
        <div class="download-app-container">
            <img class="download-app-img" src="https://www.instagram.com/static/images/appstore-install-badges/badge_ios_english-en.png/180ae7a0bcf7.png">
            <img class="download-app-img" src="https://www.instagram.com/static/images/appstore-install-badges/badge_android_english-en.png/e9cd846dc748.png">
        </div>
    </div>
</body>
</html>

Answer 1

添加文档类型声明时存在一些差异。它很少影响任何事情，但应该引起注意。在现代网页中，此声明是强制执行标准和预期行为的必要条件。

您可以在这些链接中阅读更多相关信息：

"Height=100%" is not working in html when using <!DOCTYPE>?

您的解决方案是将height: 100%添加到body及其上方的元素：

html, body {
    height: 100%;
}

`<!DOCTYPE html>` 破坏了 body 标签中的 `justify-content: center`

`<!DOCTYPE html>` breaks `justify-content: center` in the body tag

html

css

flexbox

doctype