Flexbox Wont Align Divs To Center Of Screen

Question

This is my first time using stack overflow so bear with me. The problem I'm having is when I try to align my divs to the center of the screen, it won't work for some reason. I researched everywhere to try and find a solution but it doesn't work. Does anyone know what the problem is?

body{
    margin: 0;
    background-image: linear-gradient(to top, rgba(14, 245, 26, 0.829), rgb(0, 102, 255));
    background-attachment: fixed;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Super Cool Calculator</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="heading">
                <h3>The Great Calculator</h3>
                <h4>By Antdog0101</h4>
            </div>
        </div>
    <script src="script.js"></script>
    </body>
</html>

Here is the result of when I save my code: https://i.stack.imgur.com/I1dRl.png

It aligns to the center. what is not working for you? – roottraveller Feb 21 '21 at 05:54 — roottraveller, Feb 21 '21 at 05:54

GrimReaper07 · Accepted Answer · 2021-02-21T05:56:33.767

0

you just need to add this in css :

html, body {
    height: 100%;
}

and in :

    .container {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height:100%;
    }

edited Feb 21 '21 at 05:56

answered Feb 21 '21 at 05:53

GrimReaper07

455
5
13

score 0 · Answer 2 · answered Feb 21 '21 at 05:55

Actually everything you are writing is fine. But what you want (if i got you) is you want to align everything in the center of the screen but it is centered in the div as the height of the div is not equal to the height of the window.

So i simply added height: 100vh (vh means viewport height, i.e, height of the viewable area).

I added border simply to check the dimensions of the div. Otherwise there is no need of border.

body{
    margin: 0;
    background-image: linear-gradient(to top, rgba(14, 245, 26, 0.829), rgb(0, 102, 255));
    background-attachment: fixed;
}

.container{
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Super Cool Calculator</title>
        <link href="style.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div id="heading">
                <h3>The Great Calculator</h3>
                <h4>By Antdog0101</h4>
            </div>
        </div>
    <script src="script.js"></script>
    </body>
</html>

Flexbox Wont Align Divs To Center Of Screen

2 Answers2