Introdução

Existem várias maneiras de posicionar um elemento div no centro usando CSS. Aqui estão alguns métodos comuns:

1. Usando Flexbox

Flexbox é um dos métodos mais populares para centralizar elementos horizontal e 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 Layout de Grade

CSS Grid também fornece uma maneira fácil de centralizar elementos.

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

{`

    
Isi di sini
`}

3. Usando Posição Absoluta e Transformação

Este método usa position: absoluto e transform para posicionar o elemento no centro.

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

{`

    
Isi di sini
`}

4. Usando margem automática

Este método é usado para posicionar elementos horizontalmente no centro com margens automáticas. No entanto, para vertical, são necessários truques adicionais.

{`.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. Usando alinhamento de texto e altura de linha (somente centralização horizontal)

Isso funciona bem para elementos de texto ou de bloco embutido.

{`.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. Usando exibição de tabela

Esta é uma técnica mais antiga, mas ainda 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
`}

Conclusão

Para centralizar elementos no meio da página tanto horizontal quanto verticalmente, os métodos Flexbox e Grid são os mais fáceis e modernos. No entanto, outros métodos ainda podem ser úteis dependendo das necessidades do projeto. Obrigado por ler este artigo até o fim