I have the following div

<div class="div-1">
    <div class="header">
        <h1>Test</h1>
    </div>
    <div class="toolbar">
        <button></button>
    </div>
    <div class="div-2">
       <div class="div-3">
            <div class="div-4">
            </div>
       </div>
    </div>
</div>


.div-3 {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
}

How can I vertically center div-4 on the page on different viewports (mobile, desktop, and iPad)? Note that the parent divs don’t have a defined size.