Olá pessoal, nesse artigo iremos aprender a centralizar um conteúdo dentro de uma div, ou se preferirmos, centralizar a div em relação à página.
A maneira mais comum de se apresentar um website é com ele centralizado na página, independentemente da resolução da tela do usuário. Dessa forma a visualização do website fica muito mais agradável do que se ele estivesse no canto da página.
Imagine um usuário acessando o seu site de uma televisão de 42” e esse site ficando todo à esquerda da tela, por exemplo. Ficaria muito ruim de navegar, não acham ?
Para mostrar uma forma de centralizar essa div iremos usar exemplos simples e cotidianos.
<html>
<head>
<title>Centralizando Div e conteúdos com CSS - DevMedia</title>
</head>
<body>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
magna leo, vestibulum in imperdiet dignissim, mattis eget tortor. Donec nulla
metus, luctus nec feugiat sed, hendrerit et leo. Vivamus iaculis varius elit
eget auctor. Fusce blandit, est eget sodales volutpat, nibh tellus vehicula
leo, et pellentesque lectus nunc eget dui. Aliquam dictum, ipsum a aliquam
auctor, risus magna lobortis tellus, vel dignissim leo elit ac purus.
Nam nulla arcu, condimentum et tincidunt non, rhoncus id augue. Aliquam vel
turpis orci, eu scelerisque odio.</p>
<p>Donec pulvinar ornare ante, pulvinar elementum augue laoreet vitae.
Donec euismod consectetur elementum. Suspendisse neque quam, volutpat sit amet
sagittis nec, hendrerit ut ligula. Nunc consequat nunc sit amet nulla sodales
sed consequat tortor pretium. Vestibulum euismod augue quis erat egestas
ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Vivamus aliquam pretium massa ut auctor. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Nulla facilisi. Morbi non urna lacus, non commodo nisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam
in libero eget nibh tristique facilisis ac et magna. Praesent in velit quis
neque feugiat viverra sed ut ipsum. Praesent ultrices eros vitae neque accumsan
fringilla.</p>
<p>Quisque congue lacus in augue fermentum aliquam. Curabitur lacinia
nulla vel lorem scelerisque varius. Nam pharetra laoreet commodo. Aliquam
gravida arcu sit amet ante mollis ornare. Praesent scelerisque aliquet
pretium. Donec ultrices eleifend augue, nec porta erat luctus condimentum.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Aenean risus ipsum, semper vel scelerisque eu,
hendrerit sed leo. Nulla feugiat faucibus felis ut molestie. Proin sit
amet nisl non justo venenatis auctor. Proin ac est orci, at placerat
ante. Maecenas risus lacus, commodo id feugiat non, semper vel nisi.
Fusce nec commodo magna. Praesent luctus ullamcorper ligula eget
condimentum. Aenean vel ligula urna. Curabitur et erat in metus sagittis
egestas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum magna leo, vestibulum in imperdiet dignissim, mattis
eget tortor. Donec nulla metus, luctus nec feugiat sed, hendrerit
et leo. Vivamus iaculis varius elit eget auctor. Fusce blandit, est
eget sodales volutpat, nibh tellus vehicula leo, et pellentesque
lectus nunc eget dui. Aliquam dictum, ipsum a aliquam auctor, risus
magna lobortis tellus, vel dignissim leo elit ac purus. Nam nulla
arcu, condimentum et tincidunt non, rhoncus id augue. Aliquam vel
turpis orci, eu scelerisque odio.</p>
<p>Donec pulvinar ornare ante, pulvinar elementum augue
laoreet vitae. Donec euismod consectetur elementum. Suspendisse
neque quam, volutpat sit amet sagittis nec, hendrerit ut ligula.
Nunc consequat nunc sit amet nulla sodales sed consequat tortor
pretium. Vestibulum euismod augue quis erat egestas ultricies.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Vivamus aliquam pretium massa ut auctor.
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Nulla facilisi. Morbi non urna lacus, non
commodo nisi. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Aliquam in libero eget nibh
tristique facilisis ac et magna. Praesent in velit quis neque feugiat
viverra sed ut ipsum. Praesent ultrices eros vitae neque accumsan
fringilla.</p>
</div>
</body>
</html>No código acima criamos um arquivo html com uma div chamada conteúdo, essa será a div que iremos centralizar.
No código a seguir iremos definir um tamanho de largura para ela e uma cor de fundo pra ficar mais fácil de entendermos.
#conteudo{
width: 500px;
background-color: #ccc;
}Na imagem a seguir poderemos ver como a nossa div está sendo posicionada na tela.
Como podemos ver, é muito ruim e quanto maior for a largura do monitor do usuário, pior será a visualização da página.
Vamos então agora centralizar essa div no centro da página, independentemente da resolução do monitor do usuário.
#conteudo{
width: 500px;
background-color: #ccc;
margin: 0 auto;
}Como podem ver, usando o código margin: 0 auto; dizemos que a margem rigth e left serão automáticas, fazendo assim elas se ajustarem de acordo com o resolução da tela do usuário, mantendo a div centralizada na tela.
Caso o que a gente queira seja centralizar uma imagem dentro dessa div será um pouco diferente, mas é bem simples também. Vamos pegar uma imagem da logo da DevMedia para nosso exemplo.
Primeiro vou colocar o código e depois explicar o que fizemos.
<html>
<head>
<title>Centralizando Div e conteúdos com CSS - DevMedia</title>
</head>
<body>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum magna leo, vestibulum in imperdiet dignissim, mattis eget tortor.
Donec nulla metus, luctus nec feugiat sed, hendrerit et leo. Vivamus iaculis
varius elit eget auctor. Fusce blandit, est eget sodales volutpat, nibh tellus
vehicula leo, et pellentesque lectus nunc eget dui. Aliquam dictum, ipsum a
aliquam auctor, risus magna lobortis tellus, vel dignissim leo elit ac purus.
Nam nulla arcu, condimentum et tincidunt non, rhoncus id augue. Aliquam vel
turpis orci, eu scelerisque odio.</p>
<p>Donec pulvinar ornare ante, pulvinar elementum augue laoreet vitae.
Donec euismod consectetur elementum. Suspendisse neque quam, volutpat sit amet
sagittis nec, hendrerit ut ligula. Nunc consequat nunc sit amet nulla sodales
sed consequat tortor pretium. Vestibulum euismod augue quis erat egestas ultricies.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Vivamus aliquam pretium massa ut auctor. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi.
Morbi non urna lacus, non commodo nisi. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Aliquam in libero eget
nibh tristique facilisis ac et magna. Praesent in velit quis neque feugiat
viverra sed ut ipsum. Praesent ultrices eros vitae neque accumsan fringilla.</p>
<img src="logo-devmedia.jpg" id="logo" alt="Logo DevMedia"/>
<p>Quisque congue lacus in augue fermentum aliquam. Curabitur lacinia
nulla vel lorem scelerisque varius. Nam pharetra laoreet commodo. Aliquam
gravida arcu sit amet ante mollis ornare. Praesent scelerisque aliquet pretium.
Donec ultrices eleifend augue, nec porta erat luctus condimentum. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Aenean risus ipsum, semper vel scelerisque eu, hendrerit sed leo. Nulla feugiat
faucibus felis ut molestie. Proin sit amet nisl non justo venenatis auctor.
Proin ac est orci, at placerat ante. Maecenas risus lacus, commodo id feugiat
non, semper vel nisi. Fusce nec commodo magna. Praesent luctus ullamcorper
ligula eget condimentum. Aenean vel ligula urna. Curabitur et erat in metus
sagittis egestas.</p>
</div>
</body>
</html>Como podem ver, incluímos dentro do conteúdo uma imagem com o id="logo" que será por onde iremos estilizar seu CSS específico.
Veremos agora o código CSS usado para posicionar essa imagem na tela.
#logo{
position: relative;
left: 210px;
}Dessa vez usamos o position: relative; pra dizer que o elemento vai ficar posicionado relativamente ao elemento pai dele, no caso a div#conteudo. Usando o comando left vamos movimentando ele para a esquerda na tela.
Conclusão
Nesse artigo vimos como centralizar uma div, o mesmo conceito pode ser utilizado caso queira centralizar uma imagem dentro de outra div, ou qualquer conteúdo.
Espero que tenham gostado e até o próximo artigo.
