Introducción

Hay varias formas de colocar un elemento div en el centro usando CSS. A continuación se muestran algunos métodos comunes:

1. Usando Flexbox

Flexbox es uno de los métodos más populares para centrar elementos horizontal y verticalmente.

{` .container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Contoh: memposisikan div dalam tinggi viewport */
}`}

{`

    
Isi di sini
`}

2. Usando el diseño de cuadrícula

CSS Grid también proporciona una forma sencilla de centrar elementos.

{`.container {
    display: grid;
    place-items: center; /* Center horizontally and vertically */
    height: 100vh;
}`}

{`

    
Isi di sini
`}

3. Usando Posición Absoluta y Transformación

Este método utiliza posición: absoluta y transformación para posicionar el elemento en el centro.

{`.container {
    position: relative;
    height: 100vh;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}`}

{`

    
Isi di sini
`}

4. Uso del margen automático

Este método se utiliza para posicionar elementos horizontalmente en el centro con márgenes automáticos. Sin embargo, para vertical, se necesitan trucos adicionales.

{`.centered {
    width: 200px; /* Contoh lebar */
    height: 200px; /* Contoh tinggi */
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}`}

{`
Isi di sini
`}

5. Uso de alineación de texto y altura de línea (solo centrado horizontal)

Esto funciona bien para texto o elementos de bloque en línea.

{`.container {
    text-align: center; /* Horizontal centering */
    line-height: 100vh; /* Contoh tinggi viewport untuk vertikal centering */
}
.centered {
    display: inline-block;
    vertical-align: middle; /* Jika digunakan dengan elemen lain */
    line-height: normal;
}`}

{`

    
Isi di sini
`}

6. Uso de la visualización de tablas

Esta es una técnica antigua pero aún funciona.

{`.container {
    display: table;
    height: 100vh;
    width: 100%;
    text-align: center; /* Horizontal centering */
}
.centered {
    display: table-cell;
    vertical-align: middle; /* Vertikal centering */
}`}

{`

    
Isi di sini
`}

Conclusión

Para centrar elementos en el medio de la página tanto horizontal como verticalmente, los métodos Flexbox y Grid son los más fáciles y modernos. Sin embargo, otros métodos pueden seguir siendo útiles dependiendo de las necesidades del proyecto. Gracias por leer este artículo hasta el final