È facile con display: flex . Con il seguente metodo, il testo nel div sarà centrato in verticale:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

E se vuoi, orizzontale:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}

<div>
  Your text here.
</div>

Devi vedere la versione del browser che ti serve; nelle vecchie versioni il codice non funziona.

C'è un modo più semplice per allineare verticalmente il contenuto senza ricorrere alla tabella / tabella-cella:

http://jsfiddle.net/bBW5w/1/

In esso ho aggiunto un div invisibile (larghezza = 0) che assume l'intera altezza del contenitore.

Sembra funzionare in IE e FF (ultime versioni), non ha controllato con altri browser

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

E ovviamente il CSS:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

CSS:

.vertical {
   display: table-caption;
}

Aggiungi questa classe all'elemento che contiene le cose che vuoi allineare verticalmente

Controlla questa semplice soluzione:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle

Ecco una soluzione che funziona meglio per una singola riga di testo.

Può anche funzionare per il testo multi-linea con qualche ritocco se il numero di linee è noto

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

Ecco un JSFiddle

Hmm, ci sono ovviamente molti modi per risolvere questo.

Ma ho un <div> che è posizionato assolutamente, height:100% (in realtà, in top:0;bottom:0 e larghezza fissa) e display:table-cell non ha funzionato per centrare il testo verticalmente. La mia soluzione richiedeva un elemento di span interno, ma vedo anche molte altre soluzioni, quindi potrei anche aggiungerlo:

Il mio contenitore è un .label e voglio il numero verticalmente centrato in esso. L'ho fatto posizionandolo assolutamente in top:50% e impostando l' line-height:0

<div class="label"><span>1.</span></div>

E il CSS è il seguente:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Guardalo in azione: http://jsfiddle.net/jcward/7gMLx/

Io uso il seguente per centrare verticalmente elementi casuali facilmente:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Questo centra il testo nel mio div esattamente al centro verticale di un div esterno alto 200px. Si noti che potrebbe essere necessario utilizzare un prefisso del browser (come -webkit- nel mio caso) per farlo funzionare per il browser.

Funziona non solo per il testo, ma anche per altri elementi.

Non una singola risposta mi ha aiutato, prova questo, aggiungi al genitore div:

display:flex;
align-items:center;

Prova ad incorporare un elemento tabella.

<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>

Puoi farlo impostando il display su "table-cell" e applicando un vertical-align: middle;

    {
        display:table-cell;
        vertical-align:middle;
    }

Tuttavia, questo non è supportato da tutte le versioni di Internet Explorer in base a questo estratto che ho copiato da http://www.w3schools.com/cssref/pr_class_display.asp senza autorizzazione.

Nota: i valori "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row -group "e" inherit "non sono supportati da IE7 e precedenti. IE8 richiede un! DOCTYPE. IE9 supporta i valori.

La seguente tabella mostra i valori di visualizzazione consentiti anche da http://www.w3schools.com/cssref/pr_class_display.asp . Spero che questo possa essere d'aiuto

Questa è la mia soluzione preferita per questo problema (browser semplice e molto ben supportato):

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

-MODIFICARE-

Al giorno d'oggi (non abbiamo più bisogno di IE6-7-8) userò semplicemente il display css: tabella per questo problema

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}

<div class="vcenter">
  <p>This is my Text</p>
</div>
   

Questa è un'altra variazione del div in un modello div usando calc() in CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Funziona, perché:

• position:absolute per il posizionamento preciso del div all'interno di un div
• conosciamo l'altezza del div interno perché lo impostiamo a 20px .
• calc(50% - 10px) per il 50% - metà dell'altezza per centrare il div interno

Se devi utilizzare la proprietà min-height devi aggiungere questo CSS su:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Semplice come questo, dai documenti :

La proprietà CSS con allineamento verticale specifica l'allineamento verticale di una casella inline o di una cella di tabella.

#HTML
<div>
  <span>Text</span>
</div>

#CSS
span {
  vertical-align: middle;
}

Soluzione semplice a un elemento di non conoscenza dei valori

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Centratura verticale in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Riassunto dell'articolo:

Per il browser CSS2 si può usare display:table / display:table-cell per centrare il contenuto.

Campione disponibile anche su JSFiddle :

div { border:1px solid green;}

<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

È possibile unire gli hack per il vecchio browser (IE6 / 7) in stili con l'uso di # per nascondere gli stili dai browser più recenti:

div { border:1px solid green;}

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>

HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>