CSSで画面の中央に要素を配置する方法・中央寄せする方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、CSSで画面の中央に要素を配置する方法・中央寄せする方法について解説します。

1 CSSで画面の中央に要素を配置する方法・中央寄せする2つの方法
- 1.1 ブロック要素内のテキストやHTML要素は、text-align: center; で中央寄せにする
- 1.2 ブロック要素に margin: 0 auto; と幅の設定で、設定幅の中で中央寄せにする
2 おすすめ書籍(HTML&CSS編)
3 プログラミング学習・エンジニア転職関連の情報
4 Twitterやってます！Follow Me！
5 最近の投稿

CSSで画面の中央に要素を配置する方法・中央寄せする2つの方法

CSSで画面の中央に要素を配置する方法・中央寄せする方法として紹介するのは、

CSSによる中央寄せの基本であるtext-align: center;と margin: 0 auto; の2つになります。

ブロック要素内のテキストやHTML要素は、text-align: center; で中央寄せにする

ブロック要素内のテキストや要素はtext-align: center;で中央寄せにできます。

これは、基本中の基本で、ブロック要素のHTMLタグ内のテキストやHTML要素を中央寄せにすることができます。

なので、テキストや imgタグや spanタグなどのインラインのHTML要素は、これで中央寄せにすることができます。

注意点として、インライン要素を中央に配置したい場合は、親要素にブロック要素を指定する点だけ注意です。

ポイントをまとめると次のようになります。

ブロック要素内のテキストや要素(HTMLタグ)はtext-align: center; で中央配置にできる。
インライン要素を中央に配置したい場合は、インライン要素の親にはブロック要素を指定する！

<h3 style="text-align: center;">神聖グンマー帝国のロボ玉🔥</h3>

<div style="text-align: center;">
    <img src="https://masanyon.com/wp-content/uploads/2022/11/robotama-2-1024x768.jpg" 
     alt="Robotama-Puru-Puru" width="500px" height="400px">
</div>

ブロック要素に margin: 0 auto; と幅の設定で、設定幅の中で中央寄せにする

ブロック要素にmargin: 0 auto;と幅の設定で、設定幅の中で中央寄せにすることができます。

つまり、条件としてmargin:0 auto; がブロック要素 & 要素の横幅が「100％以下」の時に、

設定した横幅の中央にブロック要素を配置できるということです。

<style>
    .robotama-prototype{

        /* %-指定は、親要素に対する相対的な指定方法 */
        /* 親要素に対して、40% */
        width:40%;

        /* 左右: 30% ずつ auto になる */
        margin:0 auto;
        border:1px solid #000;
    }
</style>

<div>
    <h3 class="robotama-prototype">ロボ玉試作1号機</h3>
</div>