How to center a div

Monday 25/07/2022

·1 min read

This code will center "myDiv" at the middle of the screen:

<!DOCTYPE html>

<html>
    <head>
        <title>Center Div Example</title>
        <meta charset="UTF-8" />
        <link type="stylesheet" href="src/styles.css"
    </head>

    <body>
        <div id="app">
            <div class="myDiv"></div>
        </div>
        <script src="src/index.js"></script>
    </body>
</html>

html,
body {
    height: 100%;
    width: 100%;
}
#app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.myDiv {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
}

Vadim Alakhverdov