Centrare verticalmente un div all'interno di un altro div

Question

Sto provando a vertical-align: middle a div in un altro div, ma per qualche motivo non funziona correttamente. Che cosa sto facendo di sbagliato?

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
vertical-align: middle; 
 
}

<div id = 'wrapper'> 
 
<div id = 'block'> I'm Block </div> 
 
<div>

PS: Questo è solo un esempio, così no, non conosce effettivamente la larghezza effettiva e l'altezza del div, come sono dinamici, secondo i loro contenuti quindi, per favore, nessun margine: 125px, o padding-top: 125px risposte, o risposte del genere.

Answer 1

La struttura vertical-align applica solo a livello di riga e table-cell elementi (source). Nel tuo codice stai lavorando con gli elementi a livello di blocco.

Prova questa FlexBox alternativa:

#wrapper { 
 
    border: 1px solid red; 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex;    /* establish flex container */ 
 
    align-items: center;   /* vertically center flex items */ 
 
} 
 

 
#block { 
 
    border: 1px solid blue; 
 
    width: 500px; 
 
    height: 250px; 
 
    /* vertical-align: middle; */ 
 
}

<div id='wrapper'> 
 
    <div id='block'> I'm Block </div> 
 
<div>

Per saperne di più su di allineamento flex qui: Methods for Aligning Flex Items

Supporto browser:Flexbox è supportata da tutti i principali browser, except IE < 10. Alcune versioni recenti del browser, come Safari 8 e IE10, richiedono vendor prefixes. Per un modo rapido per aggiungere prefissi utilizzare Autoprefixer. Maggiori dettagli in this answer.

Answer 2

Ecco come faccio normalmente.

#wrapper { 
 
border: 1px solid red; 
 
width: 500px; 
 
height: 500px; 
 
position: relative; 
 
} 
 
#block { 
 
border: 1px solid blue; 
 
width: 500px; 
 
height: 250px; 
 
position: absolute; 
 
top: 50%; 
 
transform: translateY(-50%); 
 
}

<div id="wrapper"> 
 
<div id="block"></div> 
 
</div>

Un modo semplice per renderlo dinamico.

Answer 3

Si può fare questo:

#block { 
border: 1px solid blue; 
margin:25% 0; 
width: 500px; 
height: 250px; 
vertical-align: middle;} 

Ma, non è quello che stai cercando!

o simili:

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
display:table-cell; 
vertical-align: middle; 
} 
#block { 
border: 1px solid blue; 
display:inline-block; 
width: 500px; 
height: 250px; 
} 

Answer 4

Si può fare in questo modo:

#wrapper { 
    border: 1px solid red; 
    width: 500px; 
    height: 500px; 
} 
#block { 
    border: 1px solid blue; 
    width: 500px; 
    height: 250px; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Ecco una visione dal vivo: https://jsfiddle.net/w9bpy1t4/

Answer 5

se u sapere l'altezza del div interno poi u possibile utilizzare posizione relativa sulla fascia e di posizione assoluta in div interno con qualche margine. Css può essere questo

#wrapper { 
border: 1px solid red; 
width: 500px; 
height: 500px; 
position: relative; 
} 
#block { 
border: 1px solid blue; 
width: 500px; 
height: 250px; 
vertical-align: middle; 
position: absolute; 
margin-top: 50%; 
top: -125px; 
}