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

for some reason adding <!DOCTYPE html> breaks justify-content: center in the body tag. It's like a container without a doctype takes all the space it has, and with it only a part of it.

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

CodePudding user response：

Some differences apply when you add doctype declaration. It rarely affects anything but should be noticed. In modern web pages, this declaration is nessaccery to force standard and expected behavior.

You can read more about it at these links:

The solution for you is to add height: 100% to body and the elements above it:

html, body {
    height: 100%;
}