Dica rápida e rasteira para centralizar um elemento em uma página (especialmente formulários de login). Há várias maneiras de se fazer isso, aí vai uma simples:

O seu css:

body {
    margin: 0px
    }

#horizontal {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
}

#conteudo {
    margin-left: -125px; /* Metade negativa da largura (width) da div */
    position: absolute;
    top: -35px; /* Metade negativa da altura (height) da div */
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
}

O HTML

Você pode adicionar o que quiser dentro da div #conteudo. Lembre-se que ela precisa ter um tamanho fixo para podermos calcular corretamente a posição dela em relação à página.

<body>
    <div id="horizontal">
        <div id="conteudo">        
            Texto centralizado        
        </div>
    </div>
</body>

Adaptado daqui. Quem prefere jQuery também tem uma opção.

Leia também:

One Comment to “Centralizando um elemento no meio da página”

Post Comment