犬の手も借りたいあなたに最適な記事を届けます

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

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

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

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

widthを100%にする


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

今一度要素の横幅が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を追加した結果、

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

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

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

本題:margin:0 auto;

では本題ですが、divにmargin:0 auto;を追加してみましょう。
すると下図のように要素の左右均等に空間を作って親要素に対して中心に位置取ってくれます。

テスト

左寄せの領域が・・・

テスト

真ん中に位置しました。

特に、意図せずmarginが付いている場合もありますので、キーボードのF12を押してデべロッパーツールで確認してみるのも良いです!

計算して%で指定

例えば要素にwidth:70%;を指定してみましょう。

70%を指定

このように左寄せで70%領域があり、右に30%の余白が残っています。

基本的に最大値は100%であるため、要素に70%を指定すると残りは30%です。
真ん中に配置するにはその30%の半分である15%を
left:15%;もしくはmargin:0 15%;を指定すると下記のようになります。

70%を指定

しかし注意点が有り、「親要素」のwidthが変更になった場合など、意図せず配置位置が変わる可能性があるので注意が必要です!