Cómo centrar un div horizontalmente en CSS

En HTML, Div es un elemento esencial y se usa en exceso en el desarrollo de sitios web. Sin embargo, lo principal es cuán eficientemente un desarrollador usa el elemento DIV para cumplir con su propósito; ¿Está el Div posicionado correctamente?? ¿Requiere estar alineado en el centro?? Estas son las preguntas comunes que pueden preguntarse en la mente de los desarrolladores cuando piensan en mejorar el aspecto de una página web.

Esta publicación cubrirá el método para alinear un Div horizontalmente utilizando CSS.

Cómo centrar un div horizontalmente usando CSS?

Para centrar un Div Horizontalmente, verificaremos las propiedades CSS de la lista a continuación:

• propiedad de margen
• propiedad de la propiedad
• Propiedad de visualización

Avancemos y exploremos las propiedades enumeradas una por una.

Método 1: Use la propiedad de margen para centrar un div horizontalmente en CSS

En CSS, el "margenLa propiedad se utiliza para crear espacio alrededor de los elementos HTML desde la parte superior, inferior, derecha o izquierda. También podemos usar la propiedad de margen para centrar los elementos, como Div.

Para hacerlo, siga el ejemplo dado.

Ejemplo - Cómo usar el relleno

Aquí está el contenedor de nuestra página HTML, y queremos alinearlo en el centro horizontalmente:

En nuestro archivo CSS, especificaremos el "borde"Propiedad como valor"0.2em sólido"Para ver nuestro elemento div, usa el"ancho"Propiedad a lo largo del valor de"50%"Anular el ancho predeterminado de nuestro DIV. Por último, configure el "margen"Propiedad y especifique su valor como"auto"Para centrar el div horizontalmente:

La imagen dada a continuación indica que hemos alineado con éxito el DIV agregado en el centro horizontalmente:

Método 2: Use la propiedad de posición para centrar un div horizontalmente en CSS

Para establecer la posición de diferentes elementos HTML, el "posiciónSe puede utilizar la propiedad de CSS. Esta propiedad debe combinarse con el "izquierda"Propiedad para centrar un div horizontalmente.

Mira el ejemplo de una mejor comprensión.

Ejemplo

Para diseñar nuestro contenedor, usaremos el "posición"Propiedad y establecer su valor como"absoluto". Luego, especifique el "izquierda"Propiedad con el valor"25%". Creará un espacio vacante en el lado izquierdo y alineará el DIV con el centro:

Producción

Ahora, veremos el último método.

Método 3: Use la propiedad de visualización para centrar un div horizontalmente en CSS

El "mostrar"La propiedad controla cómo se comportará el elemento seleccionado. Esta propiedad tiene algunos valores importantes que proporcionan diferentes funcionalidades, como cuando el "doblarEl valor se utiliza con la propiedad de visualización para hacer que la caja o el contenedor sean flexibles. Además, también puede utilizar la propiedad de visualización junto con el "ítems alineados"Para colocar el div en el centro horizontalmente.

Ejemplo

Dentro de nuestro archivo HTML, hemos agregado una etiqueta con algún texto:

Centremos este Div

Utilizar el "mostrar"Propiedad con el"doblar"Valor para hacer que el div sea flexible. Por último, centraremos el DIV usando "ítems alineados"Propiedad y establecer su valor como"centro":

Producción

Hemos compilado los métodos más fáciles para centrar un div horizontalmente en CSS.

Conclusión

Para centrar un div horizontalmente, "mostrar","posición", y "margenSe pueden utilizar las propiedades de CSS. La propiedad de visualización debe combinarse con el "ítems alineados"Propiedad, y la propiedad de posición debe usarse con el"izquierda"Propiedad para centrar el div horizontalmente. Por el contrario, la propiedad del margen es suficiente para colocar el div en el centro horizontalmente. Este artículo discutió diferentes métodos para alinear un div horizontalmente.