コーディング

【CSS】子要素を親要素内で上下左右中央寄せさせる方法

投稿日:2019年9月15日 更新日:

こんにちは。忘れそうなことをこそこそ書いていっています。
この記事の下部に他ページのリンクを貼っておきますので読んでもらえたら嬉しいです。

さて、今回は子要素を親要素内で上下左右中央寄せさせる方法を書きます。

早速結論ですが、
基本の形は下記のソースとなります。
※リセットCSSを設定していると言う前提で説明いたします。

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

では細かく見ていきましょう。

今回使用するHTMLとCSSは下記となります。

<div class="inner">
 <div class="parent">
  <p class="child"> 中央寄せしたい!</p>
 </div>
</div>
.parent{
  background-color: lightblue;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  .child{
    color: #fff;
    background-color: blue;
  }
}

この子要素(.child)を「上下左右中央寄せ」していきます。
まず、親要素にposition:relative;を指定して子要素にposition:absolute;を指定します。
absoluteなのでtop,leftの指定をします。親要素の真ん中に持っていきますので、子要素のtop,leftそれぞれに50%を指定します。

.parent{
   position: relative;
   background-color: lightblue;
   width: 150px;
   height: 150px;
   margin: 0 auto;
   .child{
      position:absolute;
      top:50%;
      left: 50%;
      width: 90%;
     color: #fff;
      background-color: blue;
    }
}


ただこうすると下の画像の状態になってしまいます。

中央寄せしたい

どうゆう状況かと言うと、
子要素の左上の一点が親要素に対してド真ん中にきている状態です。
つまり子要素の「幅」と「高さ」をフル無視しているのです。

そこで、子要素自体の「幅」と「高さ」の半分(50%)をマイナス方向に移動させます。

.parent{
   position: relative;
   background-color: lightblue;
   width: 150px;
   height: 150px;
   margin: 0 auto;
   .child{
   position:absolute;
   top:50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   color: #fff;
   background-color: blue;
   }
}


言い換えると、子要素の左上の一点を子要素自体の「幅」と「高さ」の半分(50%)逆方向に移動させることで、子要素自体が親要素のど真ん中に来ると言うわけです。

中央寄せしたい

最後にtext-align:center;を追加すると完成です。

中央寄せしたい

以上です。
こうすることによって、テキストで行数が増えても自動で親要素の真ん中に来てくれます。

いかがでしょうか。
自分も最初つまずいたところでもあったので皆さんの参考になれば幸いです。

このシリーズはいくつか記事がありますのでチェックしてみてください。少しでも皆さんの為になっていれば嬉しいです。

【関連記事】hoverした時に別要素にアクションをさせる方法

【関連記事】outlineとborderの違い

では!

-コーディング
-, , ,

執筆者:

関連記事

CSS

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

CSS小技集。勉強しててイイなと思ったテクを共有します。

プログラミングを独学で始めて3年間の成長ログ【現役フロントエンドエンジニアの振り返り】

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

CSS

【CSS】first-childとfirst-of-typeの違いは?lastもnthも同じ考え方

first-childとfirst-of-typeの違いです。この二つは似ているのでときどき混乱しますので詳しく解説します。last-childとlast-of-type、nth-childとnth-of-typeの違いもこの考え方と同じです。

CSS

【CSS】repeating-linear-gradient 背景に格子・ストライプを表現する

コンテンツ背景に格子状のデザインやストライプのデザインを背景に引く方法をお教えします。

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。