CSS => Centrado

Usando la transformación CSS

Las transformaciones de CSS se basan en el tamaño de los elementos, por lo que si no sabe cuán alto o ancho es su elemento, puede colocarlo absolutamente en un 50% desde la parte superior e izquierda de un contenedor relativo y traducirlo en un 50% hacia la izquierda y hacia arriba Para centrarlo verticalmente y horizontalmente.

Tenga en cuenta que con esta técnica, el elemento podría terminar siendo procesado en un límite de píxel no entero, lo que hace que se vea borroso. Ver esta respuesta en SO para una solución.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Ver ejemplo en JSFiddle

COMPATIBILIDAD DE NAVEGADOR CRUZADO

La propiedad de transformación necesita que los prefijos sean compatibles con los navegadores más antiguos. Se necesitan prefijos para Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 e IE9. Las transformaciones CSS no son compatibles con IE8 y versiones anteriores.

Aquí hay una declaración de transformación común para el ejemplo anterior:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Para más información vea canIuse .

MÁS INFORMACIÓN

El elemento se posiciona de acuerdo con el primer elemento primario no estático ( position: relative , absolute o fixed ). Explora más en este violín y este tema de documentación .

Para el centrado solo horizontal, use left: 50% y transform: translateX(-50%) . Lo mismo ocurre con el centrado solo vertical: centro con la top: 50% y transform: translateY(-50%) .

El uso de elementos de anchura / altura no estáticos con este método de centrado puede hacer que el elemento centrado aparezca aplastado. Esto ocurre principalmente con elementos que contienen texto, y se puede arreglar agregando: margin-right: -50%; y margin-bottom: -50%; . Ver este violín para más información.

Usando flexbox

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

html, body, .container {
  height: 100%;
}    
.container {
  display: flex;
  justify-content: center; /* horizontal center */
}
img {
  align-self: center; /* vertical center */
}

Ver resultado

HTML:

<img src="http://lorempixel.com/400/200" />

CSS:

html, body {
  height: 100%;
}   
body {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

Ver resultado

Consulte Centrado vertical y horizontal dinámico en la documentación de Flexbox para obtener más detalles sobre flexbox y lo que significan los estilos.

Soporte del navegador

Flexbox es compatible con todos los navegadores principales, excepto las versiones de IE anteriores a 10 .

Algunas versiones recientes del navegador, como Safari 8 y IE10, requieren prefijos de proveedores .

Para una forma rápida de generar prefijos, existe Autoprefixer , una herramienta de terceros.

Para navegadores más antiguos (como IE 8 y 9), está disponible un Polyfill .

Para una visión más detallada de la compatibilidad con el navegador flexbox, vea esta respuesta .

Posición de uso: absoluta

Trabajando en navegadores antiguos (IE> = 8)

Los márgenes automáticos, emparejados con valores de cero para las compensaciones left y right o top e bottom , centrarán un elemento absolutamente posicionado dentro de su padre.

Ver resultado

HTML

<div class="parent">
  <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
  position: relative;
  height: 500px;
}

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Los elementos que no tienen su propio ancho y altura implícitos, como las imágenes, necesitarán definir esos valores.

Otros recursos: Absolute Centering en CSS

Técnica del elemento fantasma (hack de Michał Czernow)

Esta técnica funciona incluso cuando las dimensiones del contenedor son desconocidas.

Configure un elemento "fantasma" dentro del contenedor para que esté centrado a una altura del 100%, luego use vertical-align: middle en eso y en el elemento que se centrará.

CSS

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost element */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;

  /* There is a gap between ghost element and .centered,
  caused by space character rendered. Could be eliminated by
  nudging .centered (nudge distance depends on font family),
  or by zeroing font-size in .parent and resetting it back
  (probably to 1rem) in .centered. */
  margin-right: -0.25em;
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
  <div class="centered"></div>
</div>

Usando text-align

El tipo de centrado más común y más fácil es el de las líneas de texto en un elemento. CSS tiene la regla text-align: center para este propósito:

HTML

<p>Lorem ipsum</p>

CSS

p {
    text-align: center;
}

Esto no funciona para centrar elementos de bloque completos . text-align controla solo la alineación del contenido en línea como el texto en su elemento de bloque principal.

Ver más sobre text-align en la sección de tipografía .

Centrado en relación a otro elemento.

Veremos cómo centrar el contenido en función de la altura de un elemento cercano.

Compatibilidad: IE8 +, todos los demás navegadores modernos.

HTML

<div class="content">
  <div class="position-container">
    <div class="thumb">
      <img src="http://lorempixel.com/400/200/">
    </div>
    <div class="details">
      <p class="banner-title">text 1</p>
      <p class="banner-text">content content content content content content content content content content content content content content</p>
      <button class="btn">button</button>
    </div>
  </div>
</div>

CSS

.content * {
  box-sizing: border-box;
}
.content .position-container {
  display: table;
}
.content .details {
  display: table-cell;
  vertical-align: middle;
  width: 33.333333%;
  padding: 30px;
  font-size: 17px;
  text-align: center;
}
.content .thumb {
  width: 100%;
}
.content .thumb img {
  width: 100%;
}

Enlace a JSFiddle

Los puntos principales son los .thumb 3 .thumb , .details y .position-container container:

El .position-container debe tener display: table .
Los .details deben tener el ancho real establecido width: .... y display: table-cell , vertical-align: middle .
El .thumb debe tener width: 100% si quieres que tomará todo el espacio restante y se verá influido por el .details ancho.
La imagen (si tiene una imagen) dentro de .thumb debe tener un width: 100% , pero no es necesario si tiene las proporciones correctas.

Alinear verticalmente cualquier cosa con 3 líneas de código.

Compatible con IE11 +

Ver resultado

Usa estas 3 líneas para alinear verticalmente prácticamente todo. Solo asegúrese de que la div / imagen a la que aplica el código tenga un padre con una altura.

CSS

div.vertical {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

Alinear verticalmente una imagen dentro de div

HTML

<div class="wrap">
    <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
    height: 50px;/* max image height */
    width: 100px;
    border: 1px solid blue;
    text-align: center;
}
.wrap:before {
  content:"";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

img {
    vertical-align: middle;
}

Centrado horizontal y vertical utilizando el diseño de la mesa.

Uno podría centrar fácilmente un elemento secundario usando la propiedad de visualización de table .

HTML

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>

CSS

.wrapper { 
    display: table; 
    vertical-align: center; 
    width: 200px; 
    height: 200px; 
    background-color: #9e9e9e; 
}
.parent { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}
.child { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
}

Utilizando calc ()

La función calc () es la parte de una nueva sintaxis en CSS3 en la que puede calcular (matemáticamente) qué tamaño / posición ocupa su elemento utilizando una variedad de valores como píxeles, porcentajes, etc. Nota: - Siempre que use esta función Siempre cuide el espacio entre dos valores calc(100% - 80px) .

CSS

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* height divided by 2*/
    left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

Alinear verticalmente elementos dinámicos de altura

Aplicar css de forma intuitiva no produce los resultados deseados porque

vertical-align:middle no es aplicable a elementos de nivel de bloque
margin-top:auto y margin-bottom:auto valores margin-bottom:auto utilizados se computarían como cero
margin-top:-50% valores de margen basados en porcentaje se calculan en relación con el ancho del bloque contenedor

Para el soporte de navegador más amplio, una solución alternativa con elementos de ayuda:

HTML

<div class="vcenter--container">
  <div class="vcenter--helper">
    <div class="vcenter--content">
      <!--stuff-->
    </div>
  </div>
</div>

CSS

.vcenter--container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.vcenter--helper {
  display: table-cell;
  vertical-align: middle;
}
.vcenter--content {
  margin: 0 auto;
  width: 200px;
}

jsfiddle de la pregunta original . Este enfoque

Trabaja con elementos dinámicos de altura.
respeta el flujo de contenido
es compatible con los navegadores heredados

Usando la línea de altura

También puede usar line-height para centrar verticalmente una sola línea de texto dentro de un contenedor:

CSS

div {
    height: 200px;
    line-height: 200px;
}

Eso es bastante feo, pero puede ser útil dentro de un elemento <input /> . La propiedad de line-height solo funciona cuando el texto que se va a centrar abarca una sola línea. Si el texto se ajusta en varias líneas, la salida resultante no estará centrada.

Centrado vertical y horizontalmente sin preocuparse por la altura o el ancho

La siguiente técnica le permite agregar su contenido a un elemento HTML y centrarlo tanto horizontal como verticalmente sin preocuparse por su altura o ancho .

El contenedor exterior

debe tener display: table;

El contenedor interior

debe tener display: table-cell;
debe tener vertical-align: middle;
debe tener text-align: center;

El cuadro de contenido

debe tener display: inline-block;
debe reajustar la alineación horizontal del texto a, por ejemplo. text-align: left; o text-align: right; , a menos que quieras que el texto esté centrado

Manifestación

HTML

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

CSS

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    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;
}

Véase también este violín !

Centrado con tamaño fijo.

Si el tamaño de su contenido es fijo, puede usar el posicionamiento absoluto al 50% con un margin que reduce la mitad del ancho y la altura de su contenido:

HTML

<div class="center">
    Center vertically and horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* height * -0.5 */
}

Centrado horizontal con un solo ancho fijo.

Puede centrar el elemento horizontalmente incluso si no conoce la altura del contenido:

HTML

<div class="center">
    Center only horizontally
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px;  /* width * -0.5 */
}

Centrado vertical con altura fija.

Puede centrar el elemento verticalmente si conoce la altura del elemento:

HTML

<div class="center">
    Center only vertically
</div>

CSS

.center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px;  /* width * -0.5 */
}

Usando el margen: 0 auto;

Los objetos se pueden centrar usando el margin: 0 auto; Si son elementos de bloque y tienen un ancho definido.

HTML

<div class="containerDiv">
    <div id="centeredDiv"></div>
</div>

<div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph.</p>
</div>

<div class="containerDiv">
    <img id="centeredImage" src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
}

#centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
}

#centeredParagraph {
    width: 200px;
    margin: 0 auto;
}

#centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Resultado:

Ejemplo de JSFiddle: Centrar objetos con margen: 0 auto;

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS
Centrado

Buscar..

Usando la transformación CSS

COMPATIBILIDAD DE NAVEGADOR CRUZADO

MÁS INFORMACIÓN

Usando flexbox

Posición de uso: absoluta

Técnica del elemento fantasma (hack de Michał Czernow)

Usando text-align

Centrado en relación a otro elemento.

Alinear verticalmente cualquier cosa con 3 líneas de código.

Alinear verticalmente una imagen dentro de div

Centrado horizontal y vertical utilizando el diseño de la mesa.

Utilizando calc ()

Alinear verticalmente elementos dinámicos de altura

Usando la línea de altura

Centrado vertical y horizontalmente sin preocuparse por la altura o el ancho

El contenedor exterior

El contenedor interior

El cuadro de contenido

Manifestación

Centrado con tamaño fijo.

Centrado horizontal con un solo ancho fijo.

Centrado vertical con altura fija.

Usando el margen: 0 auto;