HTML: Como centralizar uma div

Neste post veremos como centralizar uma div em um projeto web, explicando todos os detalhes de CSS que precisam ser feitos para atingir o objetivo.

E aí programador, beleza? Bora aprender coisa nova? 😀

Sempre que estamos estruturando um layout, é normal precisar centralizar elementos nele

Textos podemos centralizar com a propriedade text-align e o valor center, mas e uma div?

A maneira mais fácil, é deixarmos a div com position relative, e as margins left e right como auto

Isso fará com que o elemento fique centralizado no CSS, vamos ver um exemplo?

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Centralizando uma div</title>
</head>
<body>
    <div id="container">
        <div id="centralizar"></div>
    </div>
</body>
</html>

CSS:

#container {
    background-color: red;
    width: 1000px;
    height: 300px;
}

#centralizar {
    background-color: blue;
    width: 100px;
    height: 100px;
}

Produz o seguinte resultado:

E agora vamos aplicar as regras anteriormente citadas:

#centralizar {
    background-color: blue;
    width: 100px;
    height: 100px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

E a div estará centralizada, veja: