HTMLで写真を上下中央に配置するにはどうすればいいですか？

「align-items: center」で縦の方向、「justify-content: center」で横の方向に中央(center)と指定することで、上下中央揃えになる仕組みです。

1. CSS Flexboxを使った方法

Flexboxを使用することで、簡単に要素を上下中央に配置することができます。以下の手順を参考にしてください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写真の中央配置</title>
    <style>
        body {
            display: flex;
            height: 100vh;
            align-items: center; /* 縦方向の中央揃え */
            justify-content: center; /* 横方向の中央揃え */
            margin: 0;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="image.jpg" alt="中央に配置された写真">
</body>
</html>

2. CSS Gridを使った方法

もう一つの方法として、CSS Gridを使用する方法があります。Gridを使うとさらに柔軟なレイアウトが可能です。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写真の中央配置</title>
    <style>
        body {
            display: grid;
            height: 100vh;
            place-items: center; /* 縦横中央揃え */
            margin: 0;
        }
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img src="image.jpg" alt="中央に配置された写真">
</body>
</html>

3. まとめ

HTMLで写真を上下中央に配置するための代表的な方法は、CSSのFlexboxとGridを利用することです。これらの方法を利用することで、簡単に美しいレイアウトが実現できます。

質問	回答
FlexboxとGridは何が違いますか？	Flexboxは主に1次元のレイアウトに適しており、Gridは2次元のレイアウトを扱うのに優れています。
中央配置に画像サイズは影響しますか？	はい、画像の最大幅を設定することで、異なる画面サイズでもレイアウトが崩れないようにできます。
他に中央配置する方法はありますか？	絶対位置指定を利用する方法やMarginを利用する方法もありますが、FlexboxやGridが推奨されます。

その他の参考記事:htmlメール画像埋め込み