Atualizado em

Uma das tarefas mais comuns ao trabalhar com CSS é centralizar uma DIV na página. Neste tutorial, vou explorar algumas maneiras de centralizar uma div horizontal e verticalmente usando CSS.

Centralizar Horizontalmente

Para centralizar uma div horizontalmente, podemos usar a propriedade margin e definir seus valores esquerdo e direito como “auto”. Por exemplo:

div {
  width: 200px;
  margin: 0 auto;
}

Neste exemplo, definimos a largura da div como 200 pixels e, em seguida, definimos a margem superior e inferior como 0 e a margem esquerda e direita como auto. Isso faz com que a div seja centralizada horizontalmente em seu contêiner.

Centralizar com Flexbox

Outra maneira de centralizar horizontalmente uma div é usando flexbox. Para isso, precisamos definir o contêiner pai como um display: flex e, em seguida, usar a propriedade justify-content com o valor center. Por exemplo:

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

.container div {
  width: 200px;
}

Neste exemplo, definimos o contêiner como um display flex e, em seguida, centralizamos a div interna definindo a largura dela em 200 pixels.

Centralizar Verticalmente

Centralizar uma div verticalmente é um pouco mais complicado do que centralizá-la horizontalmente. Vamos explorar algumas maneiras de fazer isso.

Centralizar com Flexbox

Usando flexbox, podemos centralizar uma div verticalmente definindo a propriedade align-items com o valor center. Por exemplo:

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

.container div {
  width: 200px;
}

Neste exemplo, definimos a altura do contêiner como 100% da altura da tela (100vh), centralizamos a div horizontalmente usando a propriedade justify-content e, em seguida, centralizamos verticalmente usando a propriedade align-items.

Centralizar com Transform

Outra maneira de centralizar uma div verticalmente é usando a propriedade transform. Podemos definir a div interna como um elemento “absoluto” e, em seguida, usar a propriedade transform com o valor “translateY(-50%)” para centralizá-la verticalmente. Por exemplo:

.container {
  position: relative;
  height: 100vh;
}

.container div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: 200px;
}

Neste exemplo, definimos a div interna como um elemento “absoluto” em relação ao contêiner pai e, em seguida, usamos as propriedades top e left para centralizá-la horizontalmente. Finalmente, usamos a propriedade transform com o valor translateY(-50%)” para centralizá-la verticalmente.

Web Design