Search code examples
htmlcssflexboxdoctype

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

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 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>

Solution

  • 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%;
}