Flexbox vertical alignment not working

Right now my div content is only centre-aligning horizontally, but I aim for it to align that way vertically, too. I've tested across Safari on Mac and iOS and Chrome for Android.

Here's my CSS;

html, body {
    height: 100%;
}
body {
    background: #002560;
    background: linear-gradient(to bottom right, #002560, #0c182b);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Lato', sans-serif;
    color: white;
}

My HTML looks like this;

<div style="display:flex;align-items:center;justify-content:center;" id="content">
    <div>
        <h1>I'd love to be centre aligned correctly.</h1>
    </div>
</div>

Here's what I'm seeing on iOS (and other platforms);