【CSS】2021最新・要素を中央寄せに配置を指定する簡単方法

2021-08-02

CSSで要素を中央に配置するときなかなか上手くいかない事があると思います・・・

leftからXXpxで真ん中に寄せて配置しても違うパソコンや
スマートフォンで見た場合配置された要素の位置がずれることがあります。

出来るだけpxを使わずに要素を中央に配置しましょう

~目次~

widthを100%にする

実は要素が中央に配置されているけれども、要素の横幅、つまり、widthが100％になっていないため、変なところで中央配置になっている可能性があります。

今一度要素の横幅が１００％かどうか確認してみましょう。

要素{
　　　width:100%;
}

要素の背景に色をつけてみたら、どこにどのように配置されているか、確認しやすいです。

要素{
　　　width:100%;
　　　background-color:好きな色;
}

特に思わぬところにmarginが付いていて思っているサイズにならないときは背景に色をつけるか、F12キーを押してデベロッパーツールを使って確認してみましょう。

text-align:centerを使用

文字等を中央に配置したい場合、これ一つで済みます。

要素の初期値を把握していない場合、以外とこれを忘れている事があります。
これ一つで済む場合がありますので、試してみてください。

pタグなどはdivと違って

p{
　text-align:center;
}

上記のコードひとつで解決です。

margin:0 auto を指定

これは簡単且つシンプルでオーソドックスです。皆さんmarginはご存じですよね。

今一度、marginとpaddingのおさらいをしてみましょう。

通常の領域（＋border）

通常の領域にborderを足してみる、下記のようになります。

これをベースに今から説明していきます。

<div>テスト</div>

<style>
div{
　　border:5px solid red;
　　background-color:lightgrey;/*見やすくする用装飾*/
}
</style>

テスト

通常の領域＋margin

<div>テスト</div>

<style>
div{
　　border:5px solid red;
　　background-color:lightgrey;/*見やすくする用装飾*/
　　text-align:center;/*見やすくする用装飾*/
　　margin:80px;
}
</style>

テスト

margin:80px;を追加した結果、先ほどのただの通常の領域と比べて小さくなりました。

それは、サイズが変わったのではなく、赤色の線の外側に見えない空間ができました。

これがmarginです。

通常の領域＋padding

<div>テスト</div>

<style>
div{
　　border:5px solid red;
　　background-color:lightgrey;/*見やすくする用装飾*/
　　text-align:center;/*見やすくする用装飾*/
　　padding:80px;
}
</style>

テスト

次はpadding：80pxを追加した結果、

とても大きくなりました。

これも大きくなったわけではなくて、赤色の線の内側、つまり赤線と「テスト」の文字の間８０pxの空間ができました。

縦に関しては80pxの空間ができることによって縦が広がったということです。