5 maneiras simples de centralizar uma div horizontalmente e verticalmente em CSS

Maneira mais simples de centralizar um div

Sem perder tempo, vamos ver as melhores maneiras de centralizar um div

• Usando display: flex: Este método usa o layout CSS flexbox para centralizar o div horizontalmente e verticalmente em seu contêiner pai. Você pode adicionar o seguinte CSS ao contêiner pai:

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

div {
  width: 50%;
  height: 50%;
}

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

div {
  width: 50%;
  height: 50%;
}

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

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

.container {
  display: table;
  height: 100vh;
  width: 100%;
}

div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  height: 50%;
}

.container {
  height: 100vh;
  width: 100%;
  text-align: center;
}

div {
  display: inline-block;
  line-height: 100vh;
  vertical-align: middle;
  width: 50%;
  height: 50%;
}

Concluindo, centralizar um div horizontalmente e verticalmente em CSS pode ser obtido por meio de vários métodos, incluindo o uso das propriedades display: flexe , e , e , e . Cada um desses métodos tem seus próprios pontos fortes e fracos, e o melhor método para seu caso de uso específico dependerá do contexto e dos requisitos de seu projeto. Independentemente do método escolhido, centralizar um div em CSS pode melhorar muito o design e a usabilidade de sua página da web.display: gridposition: absolutetransform: translatedisplay: tabledisplay: table-cellline-height