Tecnicas de centrar objectos horizontalmente e verticalmente com css

Centrar elementos Horizontalmente

O primeiro cenário que vamos falar e um dos mais comuns: centralizar um elemento horizontalmente na janela do  browser. Para começar, vamos adicionar um div simples e dar-lhe algum estilo básico. 

Como você pode ver, por padrão, o nosso div aparece no canto superior esquerdo da janela. Precisamos que este fique no centro da janela, independentimente do tamanho da janela. Isso significa que não podemos usar o posicionamento absoluto para colocá-lo em um ponto específico, uma vez que não vai se centrar em quaisquer outros tamanhos de janela possíveis. 

Em vez disso, o que nós precisamos fazer é aproveitar o valor "auto" que pode ser aplicado para as margens. Veja como isso funciona:

Aqui está um outro exemplo para explicar melhor o uso do CSS shorthand para centrar elementos , desta vez com as margens declaradas usando três métodos distintos, mas perfeitamente equivalentes.

Centrar Textos

No próximo exemplo, eu vou te ensinar  sobre centralização de texto. Vamos começar com um elemento h1 simples dentro de uma div container.

É muito simples centrar este texto horizontalmente no espaço. É normalmente uma das primeiras coisas que você aprende em CSS. Basta definir a propriedade text-align para o centro.

Centrar elementos Verticalmente

Não tem a propriedade de centrar coisas verticalmente por se so. Irá provavelmente existir essa propriedade futuramente. Mas mesmo  pode-se centrar blocos verticalmente combinando propriedasdes de CSS. O truque é especificar que o bloco exterior está a ser formado como uma célula de uma tabela porque os conteúdos de uma célula de tabela podem ser centrado verticalmente.

O exemplo em baixo centra um parágrafo dentro de um bloco que tem uma determinada altura.

/*--- CSS --- */
DIV.container { min-height: 10em; display: table-cell; vertical-align: middle  } <!-- HTML--> <DIV class="container"> <P>O parágrafo pequeno está verticalmente centrado.</p> </DIV>