HTML5でSVGを画面の中央に配置する方法【CSSで簡単センタリング】

SVGを画面の中央に配置する基本の考え方

HTML5で作成したSVG要素を画面（ページ）の中央に表示したい場合、CSSを使うのが最もシンプルで確実な方法です。SVGはデフォルトではインライン要素として扱われるため、そのままでは左右の自動マージンが機能しません。そこで display:block を指定してブロックレベル要素に変更し、左右のマージンを auto に設定することで、水平方向の中央揃えが実現できます。

CSSコード

まず、次のCSSをスタイルシートに追加してください。

#svgelem {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

各プロパティの役割は以下のとおりです。

• display: block; … SVGをブロックレベル要素として扱い、autoマージンを有効にします。
• margin-left: auto; / margin-right: auto; … 左右の余白を自動計算し、要素を水平方向の中央に配置します。

HTML・SVGコード

次に、センタリング対象となるSVGを用意します。ここでは、赤い円を描画するシンプルな例を使用しています。

<svg id="svgelem" height="200" xmlns="https://www.w3.org/2000/svg">
    <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

このコードをブラウザで表示すると、赤い円が描画されたSVG要素全体がページの中央に配置されます。id="svgelem" がCSSセレクタと対応している点に注意してください。複数のSVGを中央揃えしたい場合は、共通のクラス名を付けて同じスタイルを適用すると効率的です。

補足：垂直方向にも中央に配置するには

上下方向も含めて画面のど真ん中に配置したい場合は、Flexboxを利用するのが便利です。親要素に以下のように指定します。

body {
    display: flex;
    justify-content: center; /* 水平方向の中央 */
    align-items: center;     /* 垂直方向の中央 */
    min-height: 100vh;
}

この方法なら、SVGだけでなく画像やテキストなど任意の子要素を画面中央に簡単に配置できます。用途に応じて、autoマージン方式とFlexbox方式を使い分けるとよいでしょう。