Am I using the best way to center a single div in HTML?

Hi,

is it the best way to center ( horizontally and vertically) a single div in html file ? (no more content will be added to my html).

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="dropdown.css">
    <title>Dropdown menu</title>
</head>
<body>
<div class="container">
    <nav>
        <ul>
            <li>Home</li>
            <li>Items</li>
            <li>Blog</li>
        </ul>
    </nav>
</div>
</body>
</html>
.container {
    height: 100vh;
    display: flex;
    align-items: center;
}

nav {
    display: flex;
    justify-content: center;
    margin: auto;
    background: red;
    width: 30%;
    height: 30%;
}

Thanks.

There are a lot of ways to center something in HTML whether it be a single item or multiple so you shouldn’t worry about if it is the best way.

If you want to read other ways to center stuff with CSS check out this link:

1 Like

You can use 5 simple code in any div to center it.

.container {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}

Thanks.
I forgot to say but I want my div responsive.

Actually for responsive issue you can use bootstrap or flexbox.

Try this one.

.div { 
margin: auto;
width: 50%
}