"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > como centralizar uma div em CSS

como centralizar uma div em CSS

Publicado em 2024-11-08
Navegar:576

ow to Center a Div in CSS

Caixa flexível:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Grade

.container {
  display: grid;
  place-items: center;
  height: 300px;
}

Margem Flexível

.container {
  display: flex;
  height: 300px;
}
.centered-div {
  margin: auto;
}

Posicionamento Absoluto

.container {
  position: relative;
  height: 300px;
}
.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Margem automática

.container {
  height: 300px;
}
.centered-div {
  width: 200px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Modelo de grade

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  height: 300px;
}
.centered-div {
  grid-column: 2;
  grid-row: 2;
}
Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/hahaxo/2024how-to-center-a-div-in-css-2hjj?1 Se houver alguma violação, entre em contato com [email protected] para excluí-la
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3