"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > Cómo centrar un div en CSS

Cómo centrar un div en CSS

Publicado el 2024-11-08
Navegar:789

ow to Center a Div in CSS

Caja flexible:

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

Red

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

Margen flexible

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

Posicionamiento absoluto

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

Margen automático

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

Plantilla de cuadrícula

.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;
}
Declaración de liberación Este artículo se reproduce en: https://dev.to/hahaxo/2024how-to-center-a-div-in-css-2hjj?1 Si hay alguna infracción, comuníquese con [email protected] para eliminarla.
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3