Scale and center div to fit on all screens

February 12, 2022

I want to scale and center this div element to look good on all screens. I tried height:x% but it doesn’t work. Only scaling it with px works. Any ideas why?

body {
    text-align: center;
}


div {
    display: block;
    justify-content: center;
    margin: auto;
    border-radius: 25px;
    height: 100px;
    width: 50%;
    background-color: aqua;
}

<html>
    <head>

        <link rel="stylesheet" href="styles.css">
    </head>
    <body>

     
        <div>
            <h1>Sample</h1>
        </div>
            
    </body>
</html>

>Solution :

You can use the global reset * { margin: 0; margin: 0; } to reset the margin and padding of all element and set width and height of the body respectively 100vw and 100vh this will allow the body to expand and take all the space visible inside of your browser.

after that you can also set the width and height of the div to 100% for each to take all spaces ans set the display property to flex to use the Flexbox layout and set align-items:center; and justify-content: center; this will put all element which are in the div in the center of the screen

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    width: 100vw;
}


div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content: center;
    background-color: aqua;
}