Centrar un Div Horizontalmente en CSS

1. Use la propiedad margin para centrar un div horizontalmente en CSS
2. Use Flexbox para centrar un div horizontalmente en CSS
3. Establezca el div en inline-block y use la propiedad text-align para centrarlo horizontalmente en CSS

El artículo discutirá algunas formas de centrar horizontalmente un div en CSS.

Use la propiedad margin para centrar un div horizontalmente en CSS

Usando la propiedad margin, podemos centrar un div horizontalmente en CSS.

La propiedad margin es una abreviatura para establecer los márgenes de las cuatro direcciones de un elemento. Podemos usar la propiedad para asignar los márgenes al top, right, bottom, y left en orden.

Podemos usar la opción auto para el margen izquierdo y derecho para centrar horizontalmente un div. El margen superior e inferior se puede establecer en 0.

La opción auto colocará el elemento en el centro y dividirá por igual el margen izquierdo y derecho. Deberíamos especificar un ancho al elemento a centrar.

El elemento ocupará el ancho dado, y el espacio horizontal restante se dividirá por igual a la izquierda y a la derecha.

Tomemos un ejemplo. Si el ancho de un elemento es 50%, la propiedad auto creará un margen izquierdo de 25% y un margen derecho de 25%.

También podemos usar la propiedad display para establecer el elemento en table. No es necesario especificar el ancho en tal caso si hay algo de contenido en la tabla.

Se utiliza el ancho del contenido. Cuando no escribimos ningún contenido en el div interno, especificamos un cierto ancho.

Por ejemplo, cree un div con el nombre de clase outerDiv en HTML. Luego, anide otro innerDiv dentro del outerDiv en HTML.

En CSS, establezca width a 100% y background a blue en la clase outerDiv. A continuación, selecciona el innerDiv y establece la propiedad display en table.

Establece su background a red, height y width a 10vh y 10vw. Por último, establece el margin en 0 auto.

Aquí, el 0 en la propiedad margin es el margen para la parte superior e inferior. La opción auto es para el margen a izquierda y derecha. Podemos centrar un div horizontalmente usando la propiedad margin de CSS.

Código de ejemplo:

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

Use Flexbox para centrar un div horizontalmente en CSS

Podemos usar las propiedades de flexbox para centrar un div horizontalmente en CSS.

Flexbox proporciona una forma sencilla de centrar un elemento vertical y horizontalmente. Podemos crear flex y definir cómo se posicionan los elementos en el flexbox.

La propiedad justify-content se puede usar para especificar la posición horizontal del contenido dentro del flexbox cuando el contenido no ocupa todo el espacio disponible. Podemos crear un flexbox en el contenedor exterior y establecer la posición del contenedor interior en el centro usando la propiedad justify-content.

Por ejemplo, seleccione la clase innerDiv y establezca las propiedades height y width en 10vh y 10vw. Establezca el color black como color de fondo. A continuación, selecciona la clase outerDiv y dale el width a 100%.

Establezca su color de fondo en 100%. Luego, crea el contenedor como un flexbox configurando la propiedad display en flex. Después, escribe la opción center a la propiedad justify-content.

Por lo tanto, podemos usar CSS Flexbox para centrar un div horizontalmente en CSS.

Código de ejemplo:

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

Establezca el div en inline-block y use la propiedad text-align para centrarlo horizontalmente en CSS

Otro método para centrar un div horizontalmente en CSS es establecer el div como un elemento inline-block. Al igual que inline, un elemento inline-block no comienza en la nueva línea.

Sin embargo, podemos establecer el width y el height. Luego, podemos usar la propiedad text-align en el div exterior para centrar el div interior horizontalmente.

El div interior hereda la propiedad text-align del div exterior, y el elemento se puede centrar.

Por ejemplo, establezca algo de alto, ancho y fondo en el div interno como los métodos anteriores. Luego, use la propiedad display para establecer el elemento en inline-block.

En el div exterior, establece su ancho y fondo. Finalmente, establezca la propiedad text-align en center.

De esta forma podemos centrar un div horizontalmente en CSS.

Código de ejemplo:

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>