Published on

Centralizando conteúdo com CSS

Authors

en | ptBR

Centralizando verticalmente

Essa é a mais simples. A gente pode fazer usando left-margin e right-margin.

Exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <p class="example">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet dolorem architecto in optio
      natus quae iste quos inventore soluta eligendi reiciendis unde, esse laboriosam ducimus minima
      cumque veritatis. Illum, earum.
    </p>
  </body>
</html>
body {
  text-align: center;
}


p {
  width: 300px;
  padding: 50px;
  border: 20px solid rgb(31, 31, 145);
}


p.example {
  margin: 10px auto 10px auto;
  text-align: left;
}
margin-center

Inserir as margens na esqueda e direita como auto fará o navegador inserir um espaço igual dos dois lados. Caso não esteja familiarizado com margin: 10px auto 10px auto;, ele trabalha de forma horária, ou seja, top, direita, baixo, esquerda.

Centralizando horizontalmente

Para isso, vamos precisar entender primeiro um conceito importante de CSS que é o valor absolute.

Quando position recebe o valor absolute, a caixa é removida do fluxo normal e não afeta a posição dos outros elementos da página, é com se ele não existisse.

As propriedades de deslocamento: top, bottom,left e right especificam onde o elemento deve aparecer em relação ao elemento contêiner. Ou seja, o elemento pai relativo dele, vai ser a base para ele ficar absoluto. Exemplo:

h1 {
  position: absolute;
  top: 0px;
  left: 500px;
  width: 250px;
}

Aqui, o título foi posicionado no topo da página e a 500 pixels a partir da sua borda esqueda. A largura é definida como 250 pixels. E você poderia mudar o top para qualquer outro valor e ficar navegando pela página com o elemento

Pensando nisso, para centralizar um elemento totalmente na tela, é possível com position: absolute.

Exemplo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <p class="example">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet dolorem architecto in optio
      natus quae iste quos inventore soluta eligendi reiciendis unde, esse laboriosam ducimus minima
      cumque veritatis. Illum, earum.
    </p>
  </body>
</html>
body {
  text-align: center;
}


p {
  width: 300px;
  padding: 50px;
  border: 20px solid rgb(31, 31, 145);
}


p.example {
  height: 120px;
  position: absolute;
  margin: auto;
  text-align: left;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}
absolute

Vale pontuar que sem o margin, isso não seria possível. Ele foi o responsável por deixar todas as margens no automático e o elemento fez o cálculo para ele deixar no meio. Outra coisa, é que isso só vale se o elemento tiver altura e largura. Ela foi definida no p.

Usando flex

Como flex é um conceito um pouco mais complexo de CSS, pretendo explicar ele num blog post separado, dedicado nisso. Porém, é mais simples centralizar algo usando flex.

Exemplo:

<body>
  <div class="example">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, aliquam?</p>
  </div>
</body>
* {
  margin: 0px;
  padding: 0px;
}


.example {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
flex

Referências:

• See on GitHub