Centralizando um objeto na Horizontal e Vertical com CSS
Pietro Gaião | julho 9th, 2009 | CSS | No Comments »
Vou mostrar agora uma técnica muito útil: Como centralizar um objeto na horizontal e na vertical com css.
No exemplo abaixo, vou utilizar uma div com o id “bloco”, iremos centralizar esse elemento na página.
Observem a marcação HTML:
<html>No HTML acima coloquei apenas uma div para ficar o mais simples e objetivo.
<head>
<title>Centralizando na Vertical e na Horizontal</title>
</head>
<body>
<div id="bloco"></div>
</body>
</html>
Entre as tags <header> coloque o seguinte CSS:
<style type="text/css">
#bloco { width: 500px; height: 500px; position: absolute; top:50%; left:50%; margin-top: -250px; margin-left: -250px; background-color: #333; }
</style>
Observem que tanto a largura quanto a altura tem 500px, depois de definir a largura e a altura posicionem o top e o left com 50%, a margin-top e a margin-left será sempre a metade do tamanho com um sinal de negativo antes e por fim, façam o posicionamento absoluto.
Vejam o exemplo completo:
<html>
<head>
<title>Centralizando na Vertical e na Horizontal</title>
<style type="text/css">
#bloco { width: 500px; height: 500px; position: absolute; top:50%; left:50%; margin-top: -250px; margin-left: -250px; background-color: #333; }
</style>
</head>
<body>
<div id="bloco">
</div>
</body>
</html>
É isso, bem simples assim.
Até a próxima.
Popularity: 12% [?]
