Cómo centrar un elemento horizontal y verticalmente

Solución:

• Enfoque 1 – transform translateX/translateY:

  Ejemplo aquí / Ejemplo de pantalla completa

  En los navegadores compatibles (la mayoría de ellos), puede utilizar top: 50%/left: 50% en combinación con translateX(-50%) translateY(-50%) para centrar el elemento de forma dinámica vertical u horizontalmente.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

---

• Enfoque 2 – Método Flexbox:

  Ejemplo aquí / Ejemplo de pantalla completa

  En los navegadores compatibles, configure el display del elemento objetivo para flex y use align-items: center para centrado vertical y justify-content: center para centrado horizontal. No olvide agregar prefijos de proveedores para obtener compatibilidad adicional con el navegador (ver ejemplo).

html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

---

• Enfoque 3 – table-cell/vertical-align: middle:

  Ejemplo aquí / Ejemplo de pantalla completa

  En algunos casos, deberá asegurarse de que el html/body la altura del elemento se establece en 100%.

  Para la alineación vertical, establezca el elemento principal width/height para 100% y añadir display: table. Luego, para el elemento hijo, cambie el display para table-cell y añadir vertical-align: middle.

  Para el centrado horizontal, puede agregar text-align: center para centrar el texto y cualquier otro inline elementos de los niños. Alternativamente, puede usar margin: 0 auto, asumiendo que el elemento es block nivel.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

---

• Enfoque 4 – Absolutamente posicionado 50% desde arriba con desplazamiento:

  Ejemplo aquí / Ejemplo de pantalla completa

  Este enfoque asume que el texto tiene una altura conocida; en este caso, 18px. Simplemente coloque absolutamente el elemento 50% desde arriba, en relación con el elemento padre. Usa un negativo margin-top valor que es la mitad de la altura conocida del elemento, en este caso – -9px.

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

---

• Enfoque 5 – El line-height método (menos flexible, no sugerido):

  Ejemplo aquí

  En algunos casos, el elemento padre tendrá una altura fija. Para el centrado vertical, todo lo que tiene que hacer es establecer un line-height valor en el elemento secundario igual a la altura fija del elemento principal.

  Aunque esta solución funcionará en algunos casos, vale la pena señalar que no funcionará cuando haya varias líneas de texto, como esta.

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

Si CSS3 es una opción (o tiene una alternativa), puede usar transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

A diferencia del primer enfoque anterior, no desea usar left: 50% con la traducción negativa porque hay un error de desbordamiento en IE9 +. Utilice un valor derecho positivo y no verá barras de desplazamiento horizontales.

La mejor manera de centrar una caja tanto vertical como horizontalmente es usar dos contenedores:

## El contenedor externo:

• debería tener display: table;

## El contenedor interior:

• debería tener display: table-cell;
• debería tener vertical-align: middle;
• debería tener text-align: center;

## El cuadro de contenido:

• debería tener display: inline-block;
• debe ajustar la alineación horizontal del texto, a menos que desee que el texto esté centrado

## Demostración:

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Ver también este violín!

## Centrado en el medio de la página:

Para centrar su contenido en el medio de su página, agregue lo siguiente a su contenedor externo:

• position : absolute;
• width: 100%;
• height: 100%;

Aquí hay una demostración para eso:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Ver también este violín!

---

---

Utiliza Nuestro Buscador