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>
Listagem 1. Centralizando uma div

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;
}
Listagem 2. Iniciando com o código CSS

Na imagem a seguir poderemos ver como a nossa div está sendo posicionada na tela.

Div posicionada a esquerda
Figura 1. Div posicionada a esquerda

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;
}
Listagem 3. Código de centralização da div

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.

Div centralizada na tela
Figura 2. 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>
Listagem 4. Centralizando Imagem

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;
}
Listagem 5. Código CSS de posicionamento de imagem

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.

Nota: Lembre-se sempre de levar em consideração o tamanho de largura(width) da div pai antes de definir quanto o elemento vai se posicionar para a esquerda, dessa forma você consegue deixá-lo centralizado na tela.
Imagem centralizada na tela
Figura 3. Imagem centralizada 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.

Se você está começando no CSS, assista a esse curso: Introdução ao CSS