画像の取り扱いについての考察

画像を上下中央に寄せるには下記のソースのフレーム設定（.frame）が肝である。
display: flex; で上下中央に揃えるようにする。そうかその手があったか。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>画像表示処理</title>
    <style type="text/css">

/* 初期化 */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* フレーム設定 */
.frame {
    height: 300px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;    
}

img {
    width: 100%;
    object-fit: cover;
}

    </style>

</head>

<body>
    <p>画像表示処理確認</p>

    <div class="frame">
        <img src="./image/philosophy_2.jpg" alt="philosophy"/>
    </div>
</body>
</html>