Aprenda 4 Maneiras Incríveis De Centralizar Tudo No CSS

Programador Viking 30 de maio de 2022 0 Comentários Leitura: 2 min

Centralizar Tudo No CSS

Neste artigo vamos te ensinar 4 maneiras bem legais de centralizar tudo no CSS com técnicas simples e que pode ser aplicado em qualquer projeto.

Existem diversas situações onde precisamos centralizar tudo no CSS, e dominar várias formas de fazer isso pode te ajudar bastante.

Pensando nisso criamos esse guia rápido onde você pode aprender essas 4 formas e aplicar no seu dia a dia.

Confira neste artigo:

Margin 0 Auto

Primeiramente temos essa técnica bem legal que é o margin 0 auto.

Você pode centralizar um elemento block definindo sua margin-left e margin-right como auto.

Porém, o elemento deve ter uma largura definida, caso contrário, sua largura seria 100% e não precisaria de centralização.

Exemplo:

.centralizado {
    width: 100px;
    margin: 0 auto;
}

Veja também: Vale a pena investir no curso de desenvolvimento web do OneBitCode?

Elemento com largura e altura fixos

Logo em seguida podemos centralizar tudo no CSS usando elemento com largura e altura fixos.

Ou seja, usando margens negativas iguais a metade da largura e altura, e depois posicionando o elemento de forma absoluta em 50% / 50%

Exemplo:

.elemento-pai {
    position: relative;
}

.elemento-filho {
    width: 300px;
    height: 100px;
    padding: 20px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -70% 0 0 -170%;
}

Display Flex

Assim como o exemplo anterior, outra forma bem interessante e muito conhecida é utilizando o display flex

Ou seja, para centralizar em ambas as direções com flexbox, você precisa usar duas propriedades de centralização.

Exemplo:

.lemento-pai {
    display: flex;
    justify-content: center;
    align-items: center;
}

Veja também: Vale a pena investir no curso de desenvolvimento web do OneBitCode?

Display Grid

Por fim, podemos usar o display grid para centralizar em ambas as direções com grid.

Ou seja, para utilizar essa técnica você precisa utilizar essas propriedades.

.elemento-pai {
    display: grid;
    place-items: center;
}

Conclusão: Centralizar Tudo no CSS

Em conclusão, vimos neste artigo como centralizar tudo no CSS utilizando técnicas simples de se aprender.

Não perca tempo! Dê um passo decisivo em direção ao seu sucesso profissional agora mesmo. Basta clicar no botão abaixo e abrir as portas para mais de 1400 cursos completos, todos com certificados válidos.

ACESSAR CURSOS COM CERTIFICADO

Enfim, espero que tenha gostado deste conteúdo pois preparamos ele para realmente te ajudar em seus estudos sobre desenvolvimento de software.

Eu vou ficando por aqui…

Até a próxima e um forte abraço!