Centralizar DIV na tela (Horizontal e Vertical) com CSS

Centralizar uma DIV na tela, tanto da horizontal quanto na vertical, já foi um problema para a maioria de nós. Mas a solução é simples e requer apenas algumas linhas de código no CSS:

– Vamos utilizar como exemplo uma DIV de 600x300px, um arquivo .css chamado estilo.css que ficará na raiz do site e o index.html.

– Primeiro vamos definir o nosso arquivo estilo.css (Você pode incorporar esse código na sua folha de estilos existente. Só tome cuidado para não duplicar a tag #div):

#div {
width:600px; /* Largura da DIV */
height:300px; /* Altura da DIV */
position:absolute; /* Importante! */
top:50%;
left:50%;
margin-top:-150px; /* Essa função pega 50% da altura da tela e compensa com metade da altura da DIV(300px/2 = 150px) */
margin-left:-300px; /* Essa função pega 50% da largura tela e compensa com metade da largura da DIV(600px/2 = 300px) */
background-color:#E6030A;
}

– Agora vamos definir o nosso index.html (lembrando que podemos colocar essa div em qualquer página do nosso site, html ou php. Só precisamos ajustar o caminho do arquivo estilo.css):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="pt-BR" >
<head>
<title>Centralizar DIV na tela (Horizontalmente e Verticalmente)</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="estilo.css" />

</head>

<body>

<div id="div"> </div>

</body>
</html>

– Veja aqui como a DIV ficou.

– Baixe os arquivos utilizados clicando aqui.

2 Comments

  1. Felipe disse:

    Olá, queria saber como centralizar apenas horizontalmente!!

    • Fernando Rezende de Oliveira disse:

      Olá Felipe! O procedimento é praticamente o mesmo. Apenas remova as linhas “left: 50%” e “margin-left: -300px”. Abraços!

Deixe sua Pergunta ou Comentário:

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Por favor, digite os caracteres desta imagem na caixa de entrada

Por favor digite o código da imagem

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>