cssで縦幅の`px`指定をしない(中身に合わせた大きさになって欲しい)ブロックの上下中央揃えがうまくいきません。

下記は一応うまくいきますが、`html`や`body`に`100%`指定しなくてはならないのが気になります。

```

    html,
    body {
        height: 100%;
    }
    .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }
    
    <div class="wrapper">
        こんにちは！
    </div>
    
```

`100vh`を使う方法もありますが、各ページの上部にヘッダー(サイトアイコンなどが表示される)を置く場合に、画面が余っているのにスクロールバーが出てしまいます。

まとめるとこのような配置したいのですが可能でしょうか。  
・上部ヘッダーを抜かした部分の領域に対して  
・上下左右中央揃え  
・大きさの`px`指定無しのブロック

追記  
ここに書いてあることがまさにピッタリだったんですが、記事の最後のコードだけ上下中央揃えになってくれました。(他はうまくいかない)  
<https://coliss.com/articles/build-websites/operation/css/css-centering-
vertically-and-horizontally.html>  
もっとシンプルな方法があるといいのですが。
CC BY-SA 4.0
2021-02-19T01:21:22.147
74121
2021-02-19T02:28:19.203
2021-02-19T02:28:19.203
34267
34267
question
html css
cssで縦幅が決まっていないブロックの上下中央揃え