【CSS】上下左右のセンタリングの色々な実装方法

こんにちは。
以前vertical-alignが効かないときのCSS Tipsとしてご紹介した方法がありましたが、
別のセンタリングをご紹介したいと思います。

以前の記事 → 【CSS】vertical-alignが効かない時はこれを試す | unitopi

簡単におさらい

水平方向のセンタリング

  • インライン要素はtext-align : center;
  • ブロック要素はmargin : 0 auto;
  • 複数のブロック要素はdisplay : inline-block;にしてからtext-align : center;

垂直方向のセンタリング

  • インライン要素で高さがわかってる
    • heightと同じline-height
    • paddingでTOPとBOTTOMを余分を埋める
  • インライン要素で高さがわからない
    • vertical-align : middle;
  • ブロック要素はdisplay : inline-block;にしてからvertical-align : middle;

flexでもいけます

  display: flex;
  justify-content: center;
  flex-direction: column;

See the Pen vEXLaK by Tsukasa Nagata (@nt-uni) on CodePen.0

参考:CSS flexible box の利用 – Web developer guide | MDN

transformを使ってみる

.box-container{
  background:#666;
  width:500px;
  height:300px;
  position:relative;
}
.box{
  width:100px;
  height:100px;
  background:white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

See the Pen qEabMB by Tsukasa Nagata (@nt-uni) on CodePen.0

いい感じですね!

まとめ

いかがでしたか?
レイアウトをしていく中で高さに合わせて垂直方向のセンタリングって少し手間だったりしますよね。
他の要素への影響なども考慮しながら、そのときそのときで一番いい方法で実装してみてください!

フォローして続編をチェック

@universionsをフォロー