プログラミング

CSSで要素を上下左右の中央に配置する方法

CSSでスタイリングをしていると、要素を中央に配置したいときがあると思います。

方法は色々あるのですが、中央に寄せる要素がインライン要素なのかボックス要素なのかによっても違ってくるので、確認しておこうと思ってまとめました。

要素を左右の中央に配置

まず、要素を左右（横方向）の中央に配置する方法です。

インライン要素

中央に配置したい要素がインライン要素の場合、text-alignプロパティで「center」を指定するのが簡単です。

p {
　text-align: center;
}

text-alignプロパティ「center」

気をつけたいのは、あくまで要素幅の中央に配置されるということ。

たとえば、次のように段落を示すp要素の幅を85%にして中央配置すると、全体的に見ると少し左に寄っているのがわかります。

p {
　text-align: center;
　width: 85%;
　background-color: orange;
}

text-alignプロパティ「center」
widthプロパティ「85%」

幅を85%に指定しているp要素（オレンジの部分）を全体の中央に配置する場合は、親要素にもtext-alignプロパティで「center」を指定する必要があります。

.centering {
　text-align: center;
}
p {
　text-align: center;
　width: 85%;
　background-color: orange;
}

親要素にもtext-alignプロパティ「center」

もしくは、対象要素（オレンジ部分）にmarginプロパティで「0 auto」を指定しても、中央に配置されます。

p {
　text-align: center;
　width: 85%;
　background-color: orange;
　margin: 0 auto;
}

text-alignプロパティ「center」

インライン要素を左右の中央に配置する方法には、Flexboxを利用する方法もあります。

まず、displayプロパティで「flex」を指定し、次にjustify-contentプロパティで「center」を指定すると、中央に配置されます。

p {
　display: flex;
　justify-content: center;
}

displayプロパティ「flex」
justify-contentプロパティ「center」

※Flexboxだと要素は中央に配置されますが、テキストは左揃えになっているので、中央揃えにするなら対象要素にtext-alignプロパティ「center」の指定が必要です。

画像を左右の中央に配置したい場合は、imgタグではなく親要素にtext-alignプロパティで「center」を指定します。

p {
　text-align: center;
}

ダンボー

インライン要素の左右中央配置まとめ

  • text-alignプロパティで「center」を指定（画像の場合は親要素に指定）
  • displayプロパティで「flex」を指定し、justify-contentプロパティで「center」を指定

ボックス要素

ボックス要素を左右の中央に配置する場合、marginプロパティで「0 auto」を指定することが多いです。

div {
　width: 75px;
　height: 75px;
　margin: 0 auto;
　background: orange;
}

text-alignプロパティを使う場合は、インライン要素と違って親要素に指定する必要があります。

.centering {
　text-align: center;
}
div {
　width: 75px;
　height: 75px;
　background: orange;
}

Flexboxを利用する場合も親要素に指定します。

インライン要素と同様、displayプロパティで「flex」を指定し、justify-contentプロパティで「center」を指定することで左右の中央に配置されます。

.centering {
　display: flex;
　justify-content: center;
}
div {
　width: 75px;
　height: 75px;
　background: orange;
}

ボックス要素の左右中央配置まとめ

  • marginプロパティで「0 auto」を指定
  • 親要素にtext-alignプロパティで「center」を指定
  • 親要素にdisplayプロパティで「flex」を指定し、justify-contentプロパティで「center」を指定

要素を上下の中央に配置

次に、要素を上下（縦方向）の中央に配置する方法です。

インライン要素

インライン要素を上下の中央に配置する場合、テキストが1行ならline-heightプロパティが簡単。

line-heightプロパティで、親要素の高さと同じ値を指定すると、上下の中央に配置されます。

.centering {
　height: 75px;
}
p {
　line-height: 75px;
}

line-heightプロパティ「親要素の高さ」

ただし、テキストが複数行になると、行間が崩れてしまいます。

複数行になると、
うまくいきません。

そのため複数行のときは別の方法がおすすめ。たとえばFlexboxを利用する方法。

親要素にdisplayプロパティで「flex」を指定し、align-itemsプロパティで「center」を指定することで、上下の中央に配置されます。

.centering {
　height: 100px;
　display: flex;
　align-items: center;
}

親要素にdisplayプロパティ「flex」
align-itemsプロパティ「center」

また、positionプロパティを使って絶対配置する方法もあります。

親要素にpositionプロパティで「relative」を指定し、中央に配置したい対象要素にpositionプロパティで「absolute」を指定。

次にtopプロパティで「50%」、transformプロパティで「translateY(-50%)」を指定することで上下の中央に配置されます。

.centering {
　height: 150px;
　position: relative;
}
p {
　position: absolute;
　top: 50%;
　transform: translateY(-50%);
}

親要素にpositionプロパティ「relative」
対象要素にpositionプロパティ「absolute」
top「50%」
transform「translateY(-50%)」

画像を上下の中央に配置する場合は、imgタグではなく、親要素にline-heightプロパティを指定します。

.centering {
　height: 250px;
}
p {
　line-height: 250px;
}

ダンボー

インライン要素の上下中央配置まとめ

  • テキストが1行の場合は、line-heightプロパティで親要素の高さと同じ値を指定
  • 親要素にdisplayプロパティで「flex」を指定し、align-itemsプロパティで「center」を指定
  • 親要素にpositionプロパティで「relative」を指定し、中央に配置したい要素にpositionプロパティで「absolute」を指定

ボックス要素

ボックス要素を上下の中央に配置する場合、Flexboxまたはpositionプロパティによる位置指定がいいかと思います。

Flexboxを利用する場合は、親要素にdisplayプロパティで「flex」を指定し、align-itemsプロパティで「center」を指定することで、上下の中央に配置されます。

.centering {
　height: 150px;
　display: flex;
　align-items: center;
}
div {
　width: 75px;
　height: 75px;
　background: orange;
}

positionプロパティで位置指定する場合は、親要素にpositionプロパティで「relative」を指定し、中央に配置したい要素にpositionプロパティで「absolute」を指定します。

インライン要素のときと同様、topプロパティで「50%」、transformプロパティで「translateY(-50%)」を指定して位置を調整します。

.centering {
　height: 150px;
　position: relative;
}
div {
　width: 75px;
　height: 75px;
　background: orange;
　position: absolute;
　top: 50%;
　transform: translateY(-50%);
}

ボックス要素の上下中央配置まとめ

  • 親要素にdisplayプロパティで「flex」を指定し、align-itemsプロパティで「center」を指定
  • 親要素にpositionプロパティで「relative」を指定し、中央に配置したい要素にpositionプロパティで「absolute」を指定

要素を上下左右の中央に配置

最後に、要素を上下左右の中央に配置する方法です。

基本的にはこれまで紹介した方法をうまく組み合わせてすることになります。

インライン要素

インライン要素を真ん中に配置する場合、テキストが1行ならtext-alignプロパティとline-heightプロパティを使うと一番手っ取り早く中央配置できますが、複数行だとうまくいかないのが難点です。

.centering {
　height: 150px;
}
p {
　text-align: center;
　line-height: 150px;
}

text-alignとline-height

やはり複数行になると、Flexboxもしくはpositionプロパティによる位置指定をすることになります。

text-alignプロパティで「center」を指定し、親要素にdisplayプロパティで「flex」、justify-contentプロパティで「center」、align-itemsプロパティで「center」を指定すると中央に配置されます。

.centering {
　height: 150px;
　display: flex;
　justify-content: center;
　align-items: center;
}
p {
　text-align: center;
}

text-alignプロパティ「center」
親要素にdisplayプロパティ「flex」
justify-contentプロパティ「center」
align-itemsプロパティ「center」

positionプロパティで位置指定をする場合は、親要素にpositionプロパティで「relative」を指定し、中央に配置したい子要素にpositionプロパティで「absolute」を指定します。

さらに、topプロパティで「50%」、leftプロパティで「50%」、transformプロパティで「translate(-50%,-50%)」を指定して位置を調整します。

.centering {
　height: 150px;
　position: relative;
}
p {
　text-align: center;
　position: absolute;
　top: 50%;
　left: 50%;
　transform(-50%,-50%);
}

親要素にpositionプロパティ「relative」
対象要素にpositionプロパティ「absolute」
top・leftプロパティ「50%」
transformプロパティ「translate(-50%,-50%)」

画像を中央に配置する場合、text-alignプロパティとline-heightプロパティは親要素に指定します。

.centering {
　height: 250px;
}
p {
　text-align: center;
　line-height: 250px;
}

ダンボー

インライン要素の上下左右中央配置まとめ

  • テキストが1行の場合は、text-alignとline-heightプロパティを指定
  • 対象要素にtext-alignプロパティで「center」、親要素にdisplayプロパティで「flex」、justify-contentプロパティで「center」、align-itemsプロパティで「center」を指定
  • 親要素にpositionプロパティで「relative」、中央に配置したい子要素にpositionプロパティで「absolute」を指定

ボックス要素

ボックス要素を真ん中に配置したい場合は、Flexboxもしくはpositionプロパティによる位置指定で可能です。

Flexboxを利用する場合、親要素にdisplayプロパティで「flex」、justify-contentプロパティで「center」、align-itemsプロパティで「center」を指定すると、子要素のボックスは上下左右の中央に配置されます。

.centering {
　height: 150px;
　display: flex;
　justify-content: center;
　align-items: center;
}
.div {
　width: 75px;
　height: 75px;
　background: orange;
}

positionプロパティで位置指定する場合、親要素にpositionプロパティで「relative」を指定し、中央配置したい子要素にpositionプロパティで「absolute」を指定します。

さらに、topプロパティで「50%」、leftプロパティで「50%」、transformプロパティで「translate(-50%,-50%)」を指定して位置を調整します。

.centering {
　height: 150px;
　position: relative;
}
div {
　position: absolute;
　top: 50%;
　left: 50%;
　transform: translate(-50%,-50%);
　width: 75px;
　height: 75px;
　background: orange;
}

ボックス要素の上下左右中央配置まとめ

  • 親要素にdisplayプロパティで「flex」、justify-contentプロパティで「center」、align-itemsプロパティで「center」を指定
  • 親要素にpositionプロパティで「relative」、中央に配置したい子要素にpositionプロパティで「absolute」を指定

まとめ

CSSで要素を中央に配置するには、色々な方法があるのがわかりました。

状況に応じてうまく使い分けている人もいると思いますし、得意な方法を使うのが多い人もいると思います。

ちょっとした要素を手軽に配置するときはtext-alignプロパティやline-heightプロパティを使うのが楽ですが、複雑になってくると、個人的にはFlexboxが便利で使いやすいなぁという印象です。

この記事で出てきたプロパティで、知らないプロパティがあれば、下の記事を参考にしてみてください。

関連記事
『text-alignで文章の揃え位置や均等割付を指定する【CSS】』
『Flexboxモデルのフレックスコンテナを指定する【CSS】』
『justify-contentでフレックスアイテムの揃え位置を指定【CSS】』
『align-itemsでフレックスアイテムの垂直方向の揃え位置を指定【CSS】』
『positionでボックスの配置方法を指定する【CSS】』
『line-heightで行の高さや行間を指定する【CSS】』
『transformは平面空間で要素を変形できる【CSS】』
『marginでボックスのマージンの幅を指定する【CSS】』

Leave a Comment