A forma seguinte de alinhamento vertical e horizontal é uma combinação de:

• Posicionamento absoluto
• Margens negativas

Para começar entender como funciona esse método copie o código XHTML abaixo e insira dentro da tag body:

  <div id="limites">
    <div id="conteudo">
      <h1>Alinhamento vertical e horizontal com <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr> e <abbr title="Cascading Style Sheets">CSS</abbr></h1>
      <p>Olá mundo!</p>
    </div>
  </div>

Nesse exemplo o elemento que precisa posicionar no meio da tela será a div#limites.

Como padrão de documento base para CSS coloque o seguinte reset:

  * { margin: 0; padding: 0; z-index: 1; }

E agora para começar a posicionar a div#limites no meio da tela declare o seguinte código:

  #limites { position: absolute; top: 50%; left: 50%; width: 680px; height: 400px; background-color: #eee; }

Isso vai fazer que a div#limites tenha os seguintes estilos:

• posição absoluta
• canto superior esquerdo a uma distância igual a 50% do tamanho da tela
• largura e altura
• fundo cinza.

Com isso o resultado será meio estranho visualmente, mas esta tudo ok.

Veja ampliado

Agora é preciso puxar a div#limites para cima e para esquerda usando margim negativa, é por esse motivo que é necessário a div#limites ter uma largura e altura definida.

Puxe então a div#limites para cima ↑ com um valor igual à metade da sua altura ( margin-top: -200px; ) e o mesmo deve ser feito para o lado esquerdo ←, puxe para esquerda à metade da sua largura ( margin-left: -340px; ).

Veja ampliada

Com isso é possível posicionar a div#limites exatamente no meio da tela.

Veja ampliada

Veja o arquivo pronto do exemplo sobre alinhamento vertical e horizontal deste post.

Outros exemplos e links interessantes

• Exemplo de alinhamento horizontal e vertical relativo a um elemento
• Posicionamento relativo
• Alinhamento horizontal e vertical

Em nosso último artigo comentamos uma forma de inserir vídeos do YouTube em seu site, com código válido, de acordo com as normas da W3C. Porém muita gente entrou em contato conosco falando que era um processo “braçal”, que demandava muito empenho.

Para solucionar este problema, criamos o Gerador de embed YouTube válido W3C que, obviamente, só precisa do URL além das dimensões desejadas para o vídeo; logo abaixo é gerado um código que você só precisa copiar e colar, garantindo que o seu código continue válido, além de funcionar em todos os browsers (inclusive IE6!).

Quer saber como inserir vídeos do YouTube em seu site, mantendo seu código validado? Veja abaixo o código para fazer isso de maneira simples:

<!--[if !IE]> -->
              <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/id-do-video" width="425" height="344">
            <!-- <![endif]-->
            <!--[if IE]>
              <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="425" height="344">
              <param name="movie" value="http://www.youtube.com/v/id-do-video" />
              <!--><!--dgx-->
              <param name="loop" value="true" />
              <param name="menu" value="false" />
              <p>Seu navegador não suporta o vídeo.</p>
              </object>
<!-- <![endif]-->

Bom, como pode-se perceber, é só substituir o “id-do-video” pelo próprio id do vídeo, localizado na URL do mesmo. Simples, não é?