.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

Navegador cruzado (incluindo Internet Explorer 8-Internet Explorer 10 sem hacks!)
• Resposta com percentagens e min - / max -
• centrado independentemente do enchimento (sem caixa-dimensionamento!)
• height deve ser declarado (ver altura variável)
• configuração recomendada overflow: auto para prevenir a utilização do conteúdo (ver transbordamento)

_{Fonte: Centro Horizontal E Vertical Absoluto Em CSS}

A maneira mais simples seria a seguinte 3 linhas de CSS:

position: relative;
top: 50%;
transform: translateY(-50%);

A seguir está um exemplo:

div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Aqui está o resultado

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

Agora a solução flexbox é uma maneira muito fácil para navegadores modernos, então eu recomendo isso para você:

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

body, html{
  height:100%;
}

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

Para centrar o div numa página, Verifique a ligação do violino .

#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Outra opção é usar a caixa de flex, verifique a ligação de fiddle .

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Outra opção é usar uma transformação CSS 3:

#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Solução Flexbox

Notas
1. O elemento pai recebe o nome da classe.
2. Adicione prefixos do Fornecedor flex se necessário pelos seus navegadores suportados .

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

Para Navegadores compatíveis com normas como Mozilla, Opera, Safari, etc. você precisa definir o div externo para ser mostrado como uma tabela e o div interior para ser mostrado como uma célula de tabela -que pode então ser centrado verticalmente. Para Internet Explorer, você precisa posição o mergulhador interior absolutamente dentro do div exterior e depois especificar o topo como 50%. As páginas seguintes explicam bem esta técnica e fornecem algumas amostras de código também:

• centro Vertical em CSS
• centralização Vertical em CSS de altura desconhecida (compatível com o Internet Explorer 7) (já não vivo)
• centralização Vertical em CSS com altura desconhecida (Internet Explorer 7 compatível) (artigo arquivado cortesia da máquina Wayback)

Existe também uma técnica para fazer a centralização vertical usando JavaScript. O alinhamento Vertical do conteúdo com JavaScript & CSS demonstra-o.

O exemplo abaixo irá centrar um div para o centro dentro do seu navegador. O que é importante (no meu exemplo) é definir height: 100% para body e html e depois min-height: 100% para o seu recipiente.

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey; 
  color: white;
}  

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

Relacionado: centrar uma imagem

Centrando-se apenas verticalmente

O recipiente exterior:

• devia ter display: table;

O recipiente interior:

• devia ter display: table-cell;
• devia ter vertical-align: middle;

A caixa de conteúdo:

• devia ter display: inline-block;

Você pode adicionar qualquer conteúdo que quiser à caixa de conteúdo sem cuidado com a sua largura ou altura!

Demonstração:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

Ver também Este Violino!

Centralizar horizontalmente e verticalmente

Se quiser centrar-se tanto na horizontal como na vertical, também precisa do seguinte.

O recipiente interior:

• devia ter text-align: center;

A caixa de conteúdo:

• deve reajustar o texto horizontal-alinhamento por exemplo text-align: left; ou text-align: right;, a menos que queira que o texto seja centrado

Demonstração:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

Ver também Este Violino!

A solução mais fácil está em baixo:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

1. especifique o contentor inicial como position:relative ou position:absolute.
2. especifique uma altura fixa no recipiente para crianças.
3. Definir position:absolute e top:50% no recipiente para crianças para mover a parte de cima para baixo para o meio do Pai.
4. definir margem-topo: - yy onde yy é metade da altura do recipiente para crianças para compensar o item.

Um exemplo disto no código:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

Acabei de escrever este CSS e para saber mais, por favor, passe por: Este artigo com alinhamento vertical qualquer coisa com apenas 3 linhas de CSS.

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

O seguinte link apresenta uma forma simples de o fazer com apenas 3 linhas no seu CSS:

Alinhar Vertical qualquer coisa com apenas 3 linhas de CSS .

Créditos a: Sebastian Ekström .

A resposta do Billbad só funciona com uma largura fixa do .inner div. Esta solução funciona para uma largura dinâmica adicionando o atributo text-align: center ao .outer div.

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>

As três linhas de código que usam transform funcionam praticamente em navegadores modernos e no Internet Explorer:

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

Estou adicionando esta resposta já que encontrei alguma incompletude na versão anterior desta resposta (e Stack Overflow não me permite comentar simplesmente).

1. 'a posição' relativa confunde o estilo se o div atual estiver no corpo e não tiver nenhum div container. No entanto "fixo" parece funcionar, mas obviamente fixa o conteúdo no centro do visor

2. Também usei este estilo para centrar algumas divs sobrepostas e descobri que no Mozilla todos os elementos dentro deste div transformado tinham perdido as suas fronteiras inferiores. Possivelmente um problema de renderização. Mas adicionando apenas o preenchimento mínimo a alguns deles rendeu-o corretamente. Chrome e Internet Explorer (surpreendentemente) renderam as caixas sem qualquer necessidade de enchimento

Fi-lo com isto (mudar a largura, a altura, a margem-superior e a margem-esquerda em conformidade):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Não responder pela compatibilidade do navegador, mas também mencionar a nova grelha e a funcionalidade Flexbox não tão nova.

Grelha

From: Mozilla-Grid Documentation-Align Div Verticalmente

Suporte Do Navegador: Suporte Do Navegador Da Grelha

CSS:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

Flexbox

Suporte Do Navegador: Suporte Do Navegador Flexbox

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Especialmente para divs progenitores com altura relativa (desconhecida), a concentração na solução desconhecida funciona muito bem para mim. Há alguns exemplos de código muito bons no artigo.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Eu acho que uma solução sólida para todos os navegadores sem usar flexbox - "alinhar-itens: centro;" é uma combinação de display: tabela e vertical-align: meio;.

CSS

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

Demo demo: https://jsfiddle.net/6m640rpp/

O benefício nesta marcação é que você define o seu tamanho de conteúdo em um único lugar - > "PageContent".
As cores do fundo da página e suas margens horizontais são definidas em suas divs correspondentes.

<div id="PageLayoutConfiguration" 
     style="display: table;
     position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
     width: 100%; height: 100%;">

        <div id="PageBackground" 
             style="display: table-cell; vertical-align: middle;
             background-color: purple;">

            <div id="PageHorizontalMargins"
                 style="width: 100%;
                 background-color: seashell;">

                <div id="PageContent" 
                     style="width: 1200px; height: 620px; margin: 0 auto;
                     background-color: grey;">

                     my content goes here...

                </div>
            </div>
        </div>
    </div>

E aqui com CSS separados:

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#PageLayoutConfiguration{
   display: table; width: 100%; height: 100%;
   position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}

#PageBackground{
   display: table-cell; vertical-align: middle;
   background-color: purple;
}

#PageHorizontalMargins{
   style="width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px; height: 620px; margin: 0 auto;
   background-color: grey;
}

O conteúdo pode ser facilmente centrado usando flexbox. O seguinte código mostra o CSS para o recipiente dentro do qual o conteúdo precisa ser centrado:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

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

    align-items: center;
}

Esta solução funcionou para mim se tiver um elemento de bloco (p. ex.). Usei as cores para tornar a solução mais clara.

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

CSS:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

Demonstração De Código JSFiddle

height:268px - para display:table age como a altura mínima.

CSS:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

E ler este artigo para uma explicação. Nota: Height é necessário.

O seguinte está a funcionar no meu caso e foi testado no Firefox.

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

A altura do div e a altura dos pais são dinâmicas. Eu uso - o quando há outros elementos no mesmo pai que é maior do que o elemento alvo, onde ambos são posicionados horizontalmente em linha.