Come allinearsi verticalmente al centro del contenuto di un div con larghezza / altezza definita?

Quale sarebbe il metodo corretto per centrare verticalmente qualsiasi contenuto in una larghezza / altezza definita div.

Nel esempio ci sono due contenuti con differenti altezze, qual è il modo migliore per centro verticalmente sia utilizzando la classe .content. (e funziona per tutti i browser e senza la soluzione di table-cell)

Avere alcune soluzioni in mente, ma vorrei conoscere altre idee, si sta utilizzando position:absolute; top:0; bottom: 0; e margin auto.

Ho studiato un po 'e da quello che ho scoperto hai quattro opzioni:

Versione 1: div genitore con visualizzazione come cella di tabella

Se non ti dispiace utilizzare il display:table-celldiv sul tuo genitore, puoi utilizzare le seguenti opzioni:

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}​

Dimostrazione dal vivo

Versione 2: Div padre con blocco di visualizzazione e cella di tabella per la visualizzazione del contenuto

.area{
    height: 100px;
    width: 100px;
    background: red;
    margin:10px;
    text-align: center;
    display:block;
}

.content {
    height: 100px;
    width: 100px;
    display:table-cell;
    vertical-align:middle;    
}​

Dimostrazione dal vivo

Versione 3: div principale mobile e div di contenuto come cella della tabella di visualizzazione

.area{
    background: red;
    margin:10px;
    text-align: center;
    display:block;
    float: left;
}

.content {
    display:table-cell;
    vertical-align:middle;
    height: 100px;
    width: 100px;
}​

Dimostrazione dal vivo

Versione 4: posizione div padre relativa con posizione contenuto assoluta

L'unico problema che ho avuto con questa versione è che sembra che dovrai creare il css per ogni specifica implementazione. La ragione di ciò è che il div di contenuto deve avere l'altezza impostata per il riempimento del testo e il margine superiore verrà calcolato da quello. Questo problema può essere visto nella demo. Puoi farlo funzionare manualmente per ogni scenario modificando la% di altezza del div del contenuto e moltiplicandolo per -.5 per ottenere il valore massimo del margine.

.area{
    position:relative; 
    display:block;
    height:100px;
    width:100px;
    border:1px solid black;
    background:red;
    margin:10px;
}

.content { 
    position:absolute;
    top:50%; 
    height:50%; 
    width:100px;
    margin-top:-25%;
    text-align:center;
}​

Dimostrazione dal vivo

Questo potrebbe essere fatto anche usando display: flexsolo poche righe di codice. Ecco un esempio:

.container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
}

Dimostrazione dal vivo

Ho trovato questa soluzione in questo articolo

.parent-element {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

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

Funziona come un incantesimo se l'altezza dell'elemento non è fissa.

margin: all_four_margin

fornendo il 50% a all_four_margin posizionerà l'elemento al centro

style="margin: 50%"

puoi applicarlo anche per seguire

margine: in alto a destra in basso a sinistra

margine: in alto a destra e in basso a sinistra

margine: in alto e in basso a destra e a sinistra

dando% appropriata otteniamo l'elemento dove vogliamo.