Saltar al contenido

11 formas de centrar div o texto en div en CSS

febrero 6, 2022
Website owner centering div element in CSS.jpgkeepProtocol

Ya sea que esté creando un sitio desde cero o con el marco Bootstrap CSS, deberá tener una comprensión básica de HTML y CSS para crear y personalizar sus diseños.

Uno de los principales desafíos de la creación de diseños es la organización y el estilo de los elementos en la página. ¿Quieres que los elementos se superpongan o que haya espacio entre ellos? ¿Quieres que el diseño sea receptivo? ¿Desea que parte del texto de la página esté centrado y el resto alineado a la izquierda? Estas son solo algunas preguntas que tendrá que responder mientras codifica.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Afortunadamente, los divs pueden ayudar. Los divs, abreviatura de elementos de división de contenido, son elementos HTML que pueden dividir su página web en secciones para que pueda orientarlos con propiedades CSS únicas. Por ejemplo, supongamos que desea incluir un título debajo de una imagen en una publicación de blog. El cuerpo del texto está alineado a la izquierda, es negro y tiene un tamaño de 18 px, pero desea que el texto del título esté centrado horizontalmente, sea gris y tenga un tamaño de 14 px para que no compita tanto por la atención del visitante. En ese caso, podría envolver el texto en un elemento div y aplicar CSS a ese elemento específico. El otro texto en la página permanecería sin cambios.

Comprender cómo centrar divs y texto en divs, en particular, es una habilidad valiosa para programadores principiantes. Puede ayudar a evitar que el contenido se extienda hasta los bordes de su contenedor, se superponga con otros elementos de la página u otros problemas que surjan al crear diseños de páginas web.

En esta publicación, cubriremos varios métodos para centrar elementos en CSS, que incluyen:

Cómo centrar texto en div en CSS

Usando CSS, puede centrar el texto en un div de varias maneras. La forma más común es usar la propiedad de alineación de texto para centrar el texto horizontalmente. Otra forma es usar las propiedades line-height y vertical-align. La última forma se aplica exclusivamente a elementos flexibles y requiere las propiedades de justificar contenido y alinear elementos. Con este método, puede centrar el texto horizontalmente, verticalmente o ambos. Echaremos un vistazo más de cerca a cada método a continuación.

Nota: Los ejemplos incluidos a lo largo se basan en W3Schools Editor de prueba. Puede hacer clic en cualquiera de los enlaces de origen para ver los ejemplos completos.

Cómo centrar texto en div horizontalmente

Hay dos formas de centrar el texto en un div horizontalmente. Echemos un vistazo a los ejemplos de cada método a continuación.

Uso de la propiedad de alineación de texto

En la mayoría de los casos, puede centrar el texto horizontalmente en un div usando la propiedad de alineación de texto y definiéndolo con el valor «centro».

Digamos que desea crear un elemento div con un breve párrafo dentro y un borde amarillo alrededor. En su HTML, le daría al div un nombre de clase como «centro». A continuación, puede utilizar el Selector de CSS .center para darle estilo con las propiedades de borde y alineación de texto.

Aquí está el CSS:

 
.center {
border: 5px solid #FFFF00;
text-align: center;
}

Aquí está el HTML:

 
<div class="center">
<p>The text within the div is centered horizontally.</p>
</div>

Aquí está el resultado:

El texto en un div se centra horizontalmente usando la propiedad de alineación de texto en CSS-1

Fuente de imagen

Uso de la propiedad Justify-Content

Hay una excepción a la regla anterior. Si está utilizando la propiedad de visualización para definir su div como un contenedor flexible, entonces no puede usar la propiedad de alineación de texto para centrar el texto horizontalmente dentro del div. En su lugar, debe usar la propiedad justificar contenido y definirla con el valor «centro».

Vamos a crear el mismo elemento div con un borde amarillo alrededor que el anterior. En su HTML, le daría al div el nombre de clase «centro» y usaría el mismo selector de clase para diseñarlo con CSS. Puede comenzar definiendo la propiedad de borde como lo hizo anteriormente. Luego, defina la propiedad de visualización como «flex » para convertir el div en un contenedor flexible y definir la propiedad de contenido justificado como «centro».

Aquí está el CSS:

 
.center {
border: 5px solid #FFFF00;
display: flex;
justify-content: center;
}

Aquí está el HTML:

 
<div class="center">
<p>The text within the div is centered horizontally.</p>
</div>

Aquí está el resultado:

El texto en un contenedor flexible se centra horizontalmente usando la propiedad de contenido justificado en CSS-1

Fuente de imagen

Cómo centrar texto en div verticalmente

Hay tres formas de centrar el texto en un div verticalmente. Son un poco más complicados que los métodos para centrar texto en un div horizontalmente.

Echemos un vistazo a los ejemplos de cada método a continuación.

Uso de la propiedad de relleno

En la mayoría de los casos, puede centrar el texto verticalmente en un div usando la propiedad de relleno. Si bien puede usar la forma abreviada, usar la propiedad de relleno abreviado es más fácil porque solo tiene que establecer dos valores. El primer valor establecerá el relleno superior e inferior. El segundo establecerá el relleno derecho e izquierdo. Dado que desea centrar el texto verticalmente, el primer valor puede ser cualquier longitud positiva o valor porcentual. El segundo valor debe ser 0.

Aquí está el CSS:

 
.center {
border: 5px solid #FFFF00;
padding: 50px 0;
}

Aquí está el HTML:

 
<div class="center">
<p>The text within the div is centered vertically.</p>
</div>

Aquí está el resultado:

El texto en un div se centra verticalmente usando la propiedad de relleno en CSS

Fuente de imagen

Uso de la propiedad de altura de línea

En la mayoría de los casos, también puede centrar el texto verticalmente en un div configurando la propiedad line-height con un valor que es igual a la altura del elemento contenedor.

Vamos a crear el mismo elemento div con un borde amarillo alrededor que el anterior. En su HTML, simplemente agregaría algo de texto dentro del div y le daría el nombre de clase «centro». No agregue etiquetas de párrafo alrededor del texto, ya que eso descentraría el texto. Ahora use el selector de clase .center para diseñar con CSS. Puede comenzar definiendo la propiedad de borde como lo hizo anteriormente. Ahora configure las propiedades de altura y altura de línea con el mismo valor.

Aquí está el CSS:

 
.center {
border: 5px solid #FFFF00;
line-height: 150px;
height: 150px;
}

Aquí está el HTML:

 
<div class="center">This single line of text is centered vertically.
</div>

Aquí está el resultado:

Una sola línea de texto en un div se centra verticalmente usando la propiedad line-height en CSS

Fuente de imagen

Ese método solo funcionará para una sola línea de texto. Si tiene varias líneas de texto dentro de un div, tendrá que definir algunas propiedades más.

Una vez que complete los pasos anteriores, podrá comience un nuevo conjunto de reglas con el selector de CSS .center p para diseñar el párrafo dentro del div. Primero, desea definir la propiedad de visualización como «bloque en línea» para que el párrafo fluya naturalmente dentro del div. Luego establezca la propiedad de altura de línea en «normal» y la propiedad de alineación vertical en «medio». Esto asegurará que el texto dentro del div esté centrado verticalmente, ya sea una línea de texto o varias líneas.

Aquí está el CSS:

 
.center {
border: 5px solid #FFFF00;
line-height: 150px;
height: 150px;
}
.center p {
display: inline-block;
line-height: normal;
vertical-align: middle;
}

Aquí está el HTML:

 
<div class="center">
<p>The text within the div is centered vertically. The text within the div is centered vertically. The text within the div is centered vertically.</p>
</div>

Aquí está el resultado:

Múltiples líneas de texto en un div se centran verticalmente usando la propiedad line-height en CSS

Fuente de imagen

Uso de la propiedad Alinear elementos

Nuevamente, si está utilizando la propiedad de visualización para definir su div como un contenedor flexible, entonces no puede usar el método anterior para centrar el texto verticalmente dentro del div. En su lugar, debe usar la propiedad align-items y definirla con el valor «centro».

Vamos a crear el mismo elemento div que el anterior, dándole el nombre de clase .center y definiendo la propiedad border en CSS. Luego, defina la propiedad de visualización como «flex» para hacer que el div sea un contenedor flexible. Para ver más claramente que el texto está centrado verticalmente, defina también la propiedad de altura. De lo contrario, el contenedor flexible solo tendrá la altura necesaria para contener el párrafo en su interior. Luego, defina la propiedad align-items como «centro».

Aquí está el CSS:

 
.center {
border: 5px solid #FFFF00;
display: flex;
height: 150px;
align-items: center;
}

Aquí está el HTML:

 
<div class="center">
<p>The text within the div is centered vertically.</p>
</div>

Aquí está el resultado:

El texto en un contenedor flexible se centra verticalmente usando la propiedad align-items en CSS-1

Fuente de imagen

Cómo centrar una división en CSS

Puede centrar un div de diferentes maneras en CSS. Si bien es fácil centrar un div horizontalmente en una página, es más complicado hacerlo verticalmente (¡pero aún manejable!).

Veremos estos dos métodos a continuación y luego explicaremos cómo puede centrar un div horizontal y verticalmente o centrar un div dentro de otro div.

Cómo centrar un div horizontalmente

Para centrar un div horizontalmente en una página, simplemente establezca el ancho del elemento y la propiedad de margen en automático. De esa manera, el div ocupará el ancho especificado en el CSS y el navegador se asegurará de que el espacio restante se divida en partes iguales entre los dos márgenes.

Veamos un ejemplo básico de un Modelo de caja CSS. Supongamos que desea crear un elemento div con un breve párrafo dentro y un borde amarillo alrededor, como en los ejemplos anteriores. En su HTML, le daría al div un nombre de clase como «centro». Luego puede usar el selector de clase .center para darle estilo con las propiedades de margen, ancho, borde y relleno.

Tenga en cuenta que, a diferencia de la propiedad de margen, la propiedad de relleno de CSS se usa para crear un espacio entre el borde del div y el párrafo dentro del div (el elemento en línea).

Puede obtener más información sobre las diferencias entre estas dos propiedades en CSS Margen vs. Padding: ¿Cuál es la diferencia?

Aquí está el CSS:

 
.center {
margin: auto;
width: 60%;
border: 5px solid #FFFF00;
padding: 10px;
}

Aquí está el HTML:

 
<div class="center">
<p>This div takes up the width specified in CSS and the remaining space is split equally between the two margins.</p>
</div>

Aquí está el resultado:

Un div centrado horizontalmente en la página usando la propiedad de margen en CSS-1

Fuente de imagen

Cómo centrar un div verticalmente

Para centrar un div verticalmente en una página, puede usar el Propiedad de posición CSS, propiedad superior y propiedad de transformación.

Comience configurando la posición del div en absoluto para que se elimine del flujo de documentos normal.

Luego establezca la propiedad superior en 50%. Esto le dice al navegador que alinee el borde superior del div con el centro de la página verticalmente (es decir, 50% hacia abajo de la página). Aquí está el problema: tener el borde superior del div alineado en el medio de la página hará que el div se vea descentrado. Aquí hay un ejemplo.

Un div con su borde superior centrado verticalmente en la página en W3Schoolss Tryit Editor

Fuente de imagen

Para centrar verdaderamente un div, debe definir una última propiedad, conocida como Propiedad de transformación CSS. Si bien hay nueve métodos de transformación diferentes (y esto ni siquiera incluye transformaciones 3D), desea utilizar el método translate() para mover el div a lo largo del eje Y. Específicamente, desea mover el div un 50 % hacia arriba desde su posición actual. Eso le indicará al navegador que coloque el centro del div en el centro vertical de la página.

Echemos un vistazo al código que necesitarías escribir.

Aquí está el CSS:

 
.center {
position: absolute;
top: 50%;
transform: translate(0, -50%);
border: 5px solid #FFFF00;
padding: 10px;
}

Aquí está el HTML:

 
<div class="center">
<p>This div is vertically centered.</p>
</div>

Aquí está el resultado:

Un div se centra verticalmente en la página utilizando las propiedades de posición, superior y transformación en CSS-1

Fuente de imagen

Cómo centrar un div horizontal y verticalmente

Para centrar un div horizontal y verticalmente en una página, puede seguir casi exactamente los mismos pasos descritos en la sección anterior. Usará la propiedad CSS position, top y transform; la única diferencia es que también usará la propiedad left para centrar horizontalmente el div.

Comience configurando la posición del div en absoluto para que se elimine del flujo de documentos normal. Luego establezca las propiedades izquierda y superior al 50%. Esto le dice al navegador que alinee el borde izquierdo y superior del div con el centro de la página horizontal y verticalmente (es decir, 50% a la derecha y hacia abajo de la página). Si te detienes ahí, te encontrarás con el mismo problema…