<Centrar Div Horizontal e Verticalmente ⁄ >

2753

2007-12-02

mySnippets css

Download

Bookmark This

Este é apenas uma (das muitas) maneiras para podermos centrar um Div (tanto horizontal como verticalmente) da janela do browser, em principio dá em qualquer tipo de resolução, pois vai-se adaptando à dimensões da mesma.

Para que funcione correctamente terão de ser usadas dimensões fixas (width e height) no #container.

- style.css

#container{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250px;
  height: 275px;
  text-align: justify;
}
#box{
  position: absolute;
  left: -50%;
  top: -50%;
  width: 100%;
  height: 100%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" media="all">
  </head>
  <body>
    <div id="container">
      <div id="box">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text
        ever since the 1500s, when an unknown printer took a galley of type
        and scrambled it to make a type specimen book. It has survived not
        only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with
        the release of Letraset sheets containing Lorem Ipsum passages, and
        more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </div>
    </div>
  </body>
</html>

Não sei até que ponto isto será uma forma "católica", vulgo standard de fazer ^_^ pois recorro a margens negativas.

Qualquer erro/ dúvida é só dizer!

2753

2007-12-02

mySnippets css

Download

Bookmark This