CSSで文字を上下左右中央に配置する方法いろいろ

 

CSSでボタンや見出しを作成する際など、ボックスの中に文字を中央配置する機会は多いと思います。今回はそんな文字の上下中央配置について、実装の方法をいくつか挙げてみようと思います。

 

実際のCSSや見た目のデモはこちら↓

①text-alignとpaddingで中央配置

まずはtext-alignとpaddingで中央配置する方法です。

.wrap.pattern-1{
  text-align:center;
  padding:20px 0;
}

文字をセンタリングした上で上下に同じ大きさのpaddingをつける方法です。
問題点としては、要素の高さ、文字の量がfont-sizeや行数に影響される点が挙げられます。

②heightとline-heightで中央配置

.wrap.pattern-2{
  text-align:center;
  height:60px;
  line-height:60px;
}

文字をセンタリングした上で、高さを固定するためにheightを設定し、同じだけの高さをlihe-heightにも指定します。
この方法の問題点としては、テキストが一行の時にしか使えない点です。
もっと見るボタンなどテキストが一行で固定の要素はこの方法が楽ですね。
応用としては、heightとwidthを同じサイズにし、border-radiusを50%にしてあげることで、丸の中に文字がある表現も可能です。

③tableレイアウトとvertical-alignで中央配置

.wrap.pattern-3{
  height:60px;
  display:table;
  text-align:center;
}

.wrap.pattern-3 div{
  display:table-cell;
  vertical-align:middle;
}

中央に配置したい要素をdivなどで囲みます。
文字をセンタリングした上で、親要素にheightを設定し、 display:table;を指定。
子要素に display:table-cell;を設定し、 vertical-align:middle;で上下中央に配置します。
ただ、この時親要素の高さより子要素のほうが大きい場合、親要素が子要素のサイズに影響されてしまいます。

④positionとtranslateで中央配置

.wrap.pattern-4{
  height:60px;
  text-align:center;
  position:relative;
}

.wrap.pattern-4 div{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:100%;
}

中央に配置したい要素をdivなどで囲みます。
文字をセンタリングした上で、親要素にheightを設定し、position:relative;を指定。
子要素にはposition:absolute;指定し top:50%;left:50%;の位置に置きます。
この時、子要素の位置は「子要素の右上の部分が」親要素の中央に来る形となります。
これを解決するために transform:translate(-50%,-50%);で位置を調整する必要があります。
この方法だと親要素の高さより子要素のほうが大きい場合でも影響されません。（はみ出すような形になる。）

⑤flexboxで中央配置

.wrap.pattern-5{
  height:60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Flexboxでも要素を中央寄せにできます。
親要素にdisplay: flex;を設定し、justify-content: center;にて縦方向の中央、align-items: centerで横方向中央に位置づけます。
flex-direction: column; を指定することで、子要素が複数あったら縦に並ぶようになります。

⑥CSS Gridレイアウトで中央配置

.wrap.pattern-6{
  height:60px;
  display: grid;
  place-items: center;
}

IE11非対応の方法ですが、CSS Gridレイアウトでも上下左右中央に配置ができます。
display: grid;　place-items: center;　と２行指定するだけで実装が可能なのでコードが綺麗でお手軽です。

 

 

CSSの表現方法をいくつか挙げてみました。
どの方法が良いかは案件や対応デバイスの範囲、デザインにもよりますが
方法をたくさん知っておくことで臨機応変に対応できると思います。
是非いろんな方法を試してみてください。

しずおかオンライン中途採用社員も、積極募集中！
しずおかオンラインののスタッフとして、地域の魅力を伝える仕事です。
くわしくはこちら！

※「イエタテ」は2023年4月より㈱くふう住まいにて運営しています