Я пытаюсьvertical-align: middle div внутри другого div, но по какой-то причине он не работает должным образом. Что я делаю неправильно?

#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:Это просто пример, так что нет, я на самом деле не знаю фактической ширины и высоты div, так как они являются динамическими, в соответствии с их содержимым, поэтому, пожалуйста, не margin-top: 125px или padding-top: 125px answers или такие ответы.