CSS — Centralizando componentes HTML

Aprenda a centralizar qualquer componente HTML

Para iniciar nosso post, vou começar dizendo que todos os componentes da tela para ser posicionados precisam de uma referência. Eles precisam ser configurados dentro de outro componente para entender onde serão posicionados.

Por exemplo: vejamos o código abaixo.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Centralizar Componente</title>
    <style>
        .corpo {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #eeeeee;
        }

        .conteudo {
            width: 80%;
            height: 100%;
            position: relative;
            margin: auto;
            background-color: #FFFFFF;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="corpo">
        <div class="conteudo">
            Ola mundo!
        </div>
    </div>
</body>

</html>

A div corpo é o componente que receberá todos os outros, ela precisa estar configurada com largura de 100% e precisa ser posicionada com absolute. o width:100% faz com que o conteúdo seja responsivo. Qualquer div que criar dentro da div corpo pode ser centralizada e e se você colocar o width nelas e trabalhar com porcentagem (%) este conteúdo vai se tornar responsivo e muito mais elegante.

Para centralizar as divs filhas na div corpo é simples, as principais configurações do CSS são: position: relative; o width:80% e o margin:auto que é responsável por centralizar o componente. Para ver isto funcionando copie o código acima para seu computador e teste o script.

Conclusão
Muitos desenvolvedores precisam usar este recurso do css mas nem sempre sabemos o como fazer. Nunca use a tag html

isto é muito velho e não deixará seu código responsivo. Este é um outro tema para outro post.

Espero que este post possa ter passado um pouco de conhecimento para sua carreira. Até a próxima.

Blog

CSS — Centralizando componentes HTML

Cleyton Silva

Join Our Newsletter. No Spam, Only the good stuff.

Related