CSS Layout - Alineación horizontal y vertical

Centrar elementos

Para centrar horizontalmente un elemento (como <div>), puedes usarmargin: auto;。

El ancho establecido en el elemento evitará que se desborde hacia el borde del contenedor.

El elemento se centra especificando un ancho y distribuyendo equitativamente los márgenes externos vacíos a ambos lados:

Nota:Si no se establecewidthla propiedad (o se establece en 100%), la alineación centrada no funcionará.

Alinear texto al centro

Si es solo para centrar texto dentro de un elemento, puedes usartext-align: center;

Consejo:Para más ejemplos de alineación de texto, consultaCSS Textocapítulo.

Centrar imágenes

Para centrar una imagen, puedes usarmargin: auto;y ponerla en unbloqueelemento <div>:

Alinear izquierda y derecha - usando posicionamiento

Podemos usarposition: absolute;la propiedad para alinear elementos:

Nota:Los elementos con posicionamiento absoluto se eliminan del flujo normal y pueden superponerse a otros elementos.

Consejo:Cuando usespositionpara alinear elementos, normalmente<body>el elemento se establecemarginypadding. Esto puede evitar diferencias visibles en diferentes navegadores.

Al usar la propiedad position, IE8 y versiones anteriores tienen un problema. Si el elemento contenedor (en nuestro caso, <div class="container">) tiene un ancho específico y se omite la declaración !DOCTYPE, IE8 y versiones anteriores añadirán un margen de 17px en el lado derecho. Esto parece ser el espacio reservado para la barra de desplazamiento. Al usar la propiedad position, siempre establece la declaración !DOCTYPE:

Alinear izquierda y derecha - usando float

También podemos usarfloatla propiedad para alinear elementos:

Cuando se alinean elementos de esta manera, es una buena idea predefinir el margen y el padding del elemento <body>. Esto puede evitar diferencias visibles en diferentes navegadores.

Nota: Si la altura del elemento hijo es mayor que la del elemento padre, y el elemento hijo tiene float establecido, entonces el elemento hijo se desbordará; en este momento puedes usar "clearfix(clear float) para resolver este problema.

Podemos agregar overflow: auto; al elemento padre para resolver el problema del desbordamiento del elemento hijo:

Al usar la propiedad float, IE8 y versiones anteriores tienen un problema. Si se omite la declaración !DOCTYPE, IE8 y versiones anteriores añadirán un margen de 17px en el lado derecho. Esto parece ser el espacio reservado para la barra de desplazamiento. Al usar la propiedad float, siempre establece la declaración !DOCTYPE:

Alineación vertical centrada - usando padding

En CSS hay muchas formas de lograr la alineación vertical centrada. Una forma sencilla es usar padding en la parte superior e inferior.padding:

Si deseas centrar tanto horizontal como verticalmente, puedes usarpaddingytext-align: center:

Centrado vertical - usando line-height

Centrado vertical - usando position y transform

Además de usarpaddingyline-heightla propiedad, también podemos usartransformla propiedad para establecer el centrado vertical:

Consejo:Para más contenido sobre la propiedad transform, consultael capítulo de Transformaciones 2D。

Más ejemplos

CSS usa margin para centrar el div

CSS usa posicionamiento absoluto para alinear el div a la derecha