Cómo centrar contenido horizontalmente usando CSS

En este tutorial, vamos a cubrir los diversos métodos de centrando el contenido horizontalmente. Existen varias soluciones con respecto al centrado, y todas dependen exactamente del tipo de contenido que desea centrar.

La razón es que los elementos HTML utilizados para el contenido pueden ser nivel en línea elementos o nivel de bloque elementos. Ambos de este tipo de elementos se comportan de manera diferente. Así como el navegador tiene estilos integrados para estos elementos, podemos aplicar nuestros propios estilos para que anular el estilo incorporado.

Texto centrado

Centrar texto dentro de un elemento es una tarea muy fácil. Simplemente puede usar el CSS text-align propiedad de estilo para centrar el texto. Anterior, el HTML <center> se utilizó el elemento.

Sin embargo, ahora está en desuso, por lo que debe no use este elemento HTML para centrar texto o elementos.

el html

<p class="centerText">This text is centered.</p>

el css

.centerText {
    text-align: center;
}

Centrar horizontalmente un elemento

En este ejemplo, vamos a centrar un elemento a nivel de bloque como una div. queremos el div permanecer en el centro (horizontalmente) de la ventana, sin importar el tamaño de la ventana.

Debido a que el tamaño de la ventana puede cambiar, no se puede usar posicionamiento absoluto para colocarlo en un punto específico porque el elemento no estará centrado para diferentes tamaños de ventana. Todo lo que tenemos que hacer es aplicar un conjunto width y auto margin ajustes.

Siempre que su bloque tenga un width conjunto, se centrará dentro del elemento contenedor, asumiendo posicionamiento no absoluto. sin embargo, el texto que está contenido dentro del elemento de bloque no estar centrado.

el html

<div class="centerBlock">This div element is centered.</div>

el css

.centerBlock {
    width: 640px;
    margin:0 auto;
}

Tenga en cuenta para que este enfoque funcione, debe declarar un width así como los márgenes izquierdo y derecho. Declarando el height del elemento es innecesario. Además, esta técnica no te ayudará con respecto al centrado vertical en la página.

Centrar horizontalmente un elemento de posición absoluta

En este ejemplo, centraremos un elemento con una posición absoluta dentro de otro elemento que tiene una posición relativa.

el html

<div id="container">
    <div id="content"></div>
</div>

el css

#container {
    height: 200px;
    width: 300px;
    background: #a0a0a0;
    margin: 0 auto;
    position: relative;
}
 
#content {
    height: 150px;
    width: 150px;
    background: #ffaa00;
    position: absolute;
    margin-left: -75px;
    left: 50%;
}

En este ejemplo, colocamos un elemento con un elemento de posición absoluta dentro de un elemento de posición relativa. Para centrarlo horizontalmentetenemos que ponernos a trabajar con el left posición, así como aplicar una izquierda negativa margin propiedad.

Este enfoque le permite mover el elemento de posición absoluta al medio de su elemento padre, luego muévalo al left 1/2 de su width. Esto hace que el elemento se coloque exactamente en el centro horizontal de su elemento padre.

¿Qué hay de los anchos de fluido?

Con diseños web cada vez más receptivos, los anchos estáticos se utilizan cada vez menos. En el siguiente ejemplo, en lugar de aplicar una estática width, se utilizan porcentajes.

#container {
    height: 200px;
    width: 70%;
    background: #a0a0a0;
    margin: 0 auto;
    position: relative;
}
 
#content {
    height: 150px;
    width: 70%;
    background: #ffaa00;
    position: absolute;
    margin-left: -35%;
    left: 50%;
}

Centrar horizontalmente una imagen

Centrar una imagen o imágenes puede ser un poco más complicado. Una aproximación es colocar la imagen o las imágenes dentro de un elemento a nivel de bloque, como un div y aplicar el text-align: center estilismo

Si bien la mayoría de los navegadores mostrarán la imagen o las imágenes centradas dentro del elemento, al usar el text-align propiedad, es no recomendado por el W3C.

El enfoque preferido es indicar al navegador que la imagen es un elemento de bloque. Como elemento de bloque, puede centrarlo como lo haría en el ejemplo anterior.

el html

<img class="centerImage" src="https://www.itgeared.com/how-to-horizontally-center-html-content-using-css/image1.jpg" alt="landscape" />

el css

.centerImage {
    display: block;
    margin:0 auto;
}

Conclusión

Entonces, como puede ver, es importante comprender el comportamiento de los elementos que está tratando de manipular.

Con un poco de práctica, deberías ser capaz de manejar casi cualquier situación de centrado usando CSS.