Técnicas comuns a partir de 2014:

• Aproximação 1 - transform translateX/translateY:

  Exemplo Aqui / Tela Cheia Exemplo

  Em navegadores suportados (a maioria deles), pode usar top: 50%/left: 50% em combinação com translateX(-50%) translateY(-50%) para centralizar dinamicamente vertical / horizontalmente o elemento.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

• Método de aproximação 2-Flexbox:

  Exemplo Toma. / Exemplo De Ecrã Completo

  Em navegadores suportados, definir o display do elemento alvo em flex e utilizar align-items: center para o centro vertical e justify-content: center para o centro horizontal. Apenas não se esqueça de adicionar prefixos do fornecedor para suporte adicional ao navegador ( ver exemplo ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

• Aproximação 3 - table-cell/vertical-align: middle:

  Exemplo Aqui / Ecrã Completo Exemplo

  Em alguns casos, terá de assegurar que o html/body a altura do elemento está definida em 100%.

  Para o alinhamento vertical, definir o elemento-mãewidth/height a 100% e adicionar display: table. Então, para o elemento criança, mude o display para table-cell e adicione vertical-align: middle.

  Para a centralização horizontal, pode adicionar text-align: center ao centro do texto e de quaisquer outros elementos para crianças. Em alternativa, pode usar margin: 0 auto assumindo que o elemento é block nivel.

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

• Aproximação 4-posição absoluta 50% do topo com deslocamento:

  Exemplo Aqui / Tela Cheia Exemplo

  Esta abordagem assume que o texto tem uma altura conhecida - neste caso, 18px. Apenas posicione absolutamente o elemento 50% do topo, em relação ao elemento pai. Use um valor margin-top negativo que é metade da altura conhecida do elemento, neste caso - -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

• Aproximação 5-método line-height (menos flexível - não sugerido):

  Exemplo Aqui

  Em alguns casos, o elemento-mãe terá uma altura fixa. Para a centralização vertical, tudo o que tem de fazer é definir um valor line-height no elemento-filho igual à altura fixa do elemento-mãe.

  Embora esta solução funcione em alguns casos, vale a pena notar que não funcionará quando houver vários linhas de texto - assim.

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

Usando flexbox/ CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

O CSS:

.box{
    display: flex;
    justify-content: center;
    align-items: center;
}

Retirado de dica rápida: a forma mais simples de centrar os elementos verticalmente e horizontalmente

Adicione a linha display: table-cell; ao seu css para esse div. apenas as células da tabela suportam o vertical-align: middle; mas você pode dar essa definição de [table-cell] para o div..

Exemplo Vivo aqui: http://jsfiddle.net/tH2cc/

div{
    height:90px;
    width:90px;
    text-align:center;
    border:1px solid silver;
    display: table-cell; // this says treat this element like a table cell
    vertical-align:middle; //now we can center vertically like in a TD
}

Uso sempre o seguinte CSS para um contentor, para centrar o seu conteúdo horizontal e verticalmente.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Veja Isto em acção aqui: https://jsfiddle.net/yp1gusn7/

Podes tentar um código muito fácil para isto

  display:flex;
  align-items: center;
  justify-content:center;

.box{
  height:90px;
  width:90px;
  background:green;
  display:flex;
  align-items: center;
  justify-content:center;
}

<div class="box">
  Lorem 
</div>

Codpen link http://codepen.io/santoshkhalse/pen/xRmZwr

Dá esta classe css ao alvo

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Aproximação 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello World!
</div>

Aproximação 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

Aproximação 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

#parent
{
  display:table;
}
#child
{
  display:table-cell;
  width:100%; //as large as its parent to center the text horizontally
  text-align: center;
  vertical-align:middle;//vertically align this element on its parent
}

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

Uma das melhores abordagens é usar a propriedade flex no div-mãe e adicionar margem: propriedade automática a tag do elemento

.parent{
    display: flex;
    flex-direction: column;
    flex: 1;
    height:100%;
}

p{
    margin:auto;
}

Isto funciona para mim (testada ok!)

Html:

<div class="mydiv">
    <p>Item to be Centered!</p>
</div>

Css:

.mydiv {
    height: 100%; /* or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* to compensate own width and height */
}

Pode escolher outros valores depois 50% fi. 25% para centro a 25% dos Pais

Ajustar a altura da linha para obter o alinhamento vertical.

line-height: 90px;

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
        width: 100%;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p>hello world</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv{
        height:450px;
        background:#f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p{
        font-size:24px;}
    </style>
  </head>
  <body>
    <div class="maindiv">
      <h1>Title</h1>

    </div>
  </body>
</html>

Pode tentar os seguintes métodos:

1. Se você tem uma única palavra ou uma frase de linha, então o seguinte código pode fazer o truque.

Tem um texto dentro de uma etiqueta div e dá-lhe uma identificação. Defina as seguintes propriedades para esse id.

id-name {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed red;
}

Nota: Certifique-se de que a propriedade da altura da linha é igual à altura da divisão.

Imagem

Mas, se o conteúdo for mais do que uma única palavra ou uma linha, então isto não funciona. Além disso, haverá momentos em que você não pode especificar o tamanho de um divison em PX ou %.(quando o divison é realmente pequeno e você quer que o conteúdo seja exatamente no meio)

2.Para resolver este problema, podemos tentar a seguinte combinação de propriedades.

id-name {
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed red;
}

Imagem

Estas 3 linhas de código definem o conteúdo exactamente no meio de uma divisão (independentemente do tamanho da visualização). O "alinhar-itens: centro" ajuda na centralização vertical enquanto "justify-content: center" irá torná-lo horizontalmente centrado.

Nota: Flex não funciona em todos os navegadores. Certifique-se que adiciona os prefixos apropriados do fornecedor para o suporte adicional do navegador.

Aplicar o estilo:

position: absolute;
top: 50%;
left: 0;
right: 0;

O teu texto seria centrado independentemente do seu comprimento.

.center-stuff{  
      text-align: center;
      vertical-align: middle;
      line-height: 230px;/*This should be the div height*/
    }

Tente o seguinte exemplo. Adicionei exemplos para cada categoria: horizontal e vertical

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html> 

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

footer {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    left: 0;
}