2022/08/09

【HTML+CSS】CSSで要素や要素内を上下左右中央揃えにする方法はflexが万能説！

CSSで要素や要素内を上下左右中央揃えにする方法はflexが万能説！

要素内で上下左右中央揃え（１行）

これはh2やボタンを作る時によく使います。

テキストが１行のボタン
テキストが１行のボタン
 <a href="#" class="btn -type1"><i class="fa-solid fa-envelope"></i>お問い合わせ</a>
.btn {
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 5px;
}
.-type1 {
  font-weight: 900;
  background: linear-gradient(110deg, #e31567, #a10040);
  box-shadow: 5px 5px 5px rgba($color: #213949, $alpha: 0.6);
  width: 245px;
  height: 65px;
  font-size: 22px;
  line-height: 65px;
}
text-align: center;
height: 65px;
line-height: 65px;

ポイントは上記のコード。

１行であれば、heightとline-heightを同じ数値にすれば上下中央寄せになる。

要素内で上下左右中央揃え（複数行）

これはテキストが複数行のh2とかボタンに使える方法。

header内の上下中央寄せ
<div class="contactBox">
 　<div class="phoneBox">
     　<div class="phoneText">
        　<i class="fa-solid fa-phone"></i>電話：<span class="-lg">0120-537-237</span>
        　<span class="-s">受付時間:10:30～18:00 / 定休日：土日祝日</span>
     　</div>
   </div>
   <div class="btnBox">
     　<a href="https://shoptamago.lalabeauty.net/contact/index" class="btn -type1" target="_blank"><i class="fa-solid fa-envelope"></i> お問い合わせ</a>
  　</div>
</div>
.contactBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
display: flex;
justify-content: center;
align-items: center;

もうこのflexが万能すぎて、これがないとコーディングできないくらい。

flexは今まで自分の中では2つ以上の要素を横に並べるって印象が強かったですが、１つのh2要素内でも上下左右中央寄せしたい時に使えるので便利！

親要素内で子要素を上下左右中央揃え

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

こちらもよく使うパターンのやつ。

親要素にposition: relative; 子要素にposition: absolute;と定番のやつ。

positionでtopとleftを50%にするんだけど、左上を起点としてるのでこれでは子要素が真ん中にこない。

子要素を真ん中にするには、右下にずれている分を左上に要素をずらす必要がある。

transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);

これらで子要素を上下左右中央表示することができる。

まとめ

中央寄せする方法は１つではないので、自分が使いやすいCSSを見つけて多用していけばいいと思います。

table-cellとかほぼ使ったことないです。centerじゃなくてmiddleってのもなんかイヤなんで。笑

とりあえずflexとpositionを極めていけば間違いない。特にflexは使い勝手が万能なんで！

READ MORE IN BLOGS