How do I center my content inside of my .window-container div?

Question

I'm new to programming and starting to stay away from following tutorials. I am planning to do a login form with HTML CSS and JavaScript. How do I center my content inside of my <div class="widow-container">?

This is the layout that I am aiming for. It's not mine so credit to the owner.

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.window-container{
    width: 80vw;
    height: 90vh;
    background-color: red;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}
.form-center{
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<body>
    <form class="window-container">
        <h1>
            Login
        </h1>
        <div class="form-center">
            <label for="name">
                Username
            </label>
            <div class="container">
                <i class="far fa-user"></i>
                <input type="text" placeholder="Enter your username" name="username" required>
            </div>
            <label for="name">
                Password
            </label>
            <div class="container">
                <i class="fas fa-key"></i>
                <input type="password" placeholder="Enter your password" name="password" required>
            </div>
            <a href="#">Forgot password?</a>
            <input type="button" class="submit-btn" value="LOGIN">
        </div>
        <h5>Or Sign Up Using</h3>
        <div>
            <i class="fab fa-facebook"></i>
            <i class="fab fa-google-plus"></i>
        </div>
    </form>
</body>
</html>

score 0 · Answer 1 · answered Aug 14 '20 at 00:14

Just add a CSS rule for the body element of text-align:center:

body { text-align:center; }

*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.window-container{
    width: 80vw;
    height: 90vh;
    background-color: red;
    
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}
.form-center{
    justify-content: center;
    align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<body>
    <form class="window-container">
        <h1>
            Login
        </h1>
        <div class="form-center">
            <label for="name">
                Username
            </label>
            <div class="container">
                <i class="far fa-user"></i>
                <input type="text" placeholder="Enter your username" name="username" required>
            </div>
            <label for="name">
                Password
            </label>
            <div class="container">
                <i class="fas fa-key"></i>
                <input type="password" placeholder="Enter your password" name="password" required>
            </div>
            <a href="#">Forgot password?</a>
            <input type="button" class="submit-btn" value="LOGIN">
        </div>
        <h5>Or Sign Up Using</h3>
        <div>
            <i class="fab fa-facebook"></i>
            <i class="fab fa-google-plus"></i>
        </div>
    </form>
</body>
</html>

@GemEliezerEspiritu You're welcome. Please consider marking this as "the" answer by clicking the check mark at the top left of the answer. — Scott Marcus, Aug 14 '20 at 11:37

How do I center my content inside of my .window-container div?

1 Answers1