注目キーワード

CSSでボックスを中央に配置するやり方を覚える

CSSでボックスを中央に配置するやり方を覚える
  1. HOME
  2. CSS
  3. CSSでボックスを中央に配置するやり方を覚える

CSSでボックスを中央に配置するやり方は１つではなく、いくつかのやり方があるので何パターンか覚えておくと、「この中央配置にするやり方だとできないから他のパターンで中央に寄せてみよう」とCSSを扱う範囲が広がります。

 

  • margin: 0 auto
  • text-align: center
  • background-position
  • position: relativeとposition: absolute
  • transform: translate
  • display: flex

 

上記のプロパティを使用したCSSでボックスを中央に配置するやり方をまとめてみたので参考になることがあればと思います。

 

目次

CSSで中央にボックスを配置する

 

CSSで中央にボックスを配置するやり方で1番初めに私が覚えたのはmarginプロパティを使用した中央配置のやり方でした。

CSSのmarginで中央にボックスを配置するやり方をHTMLのdiv要素にCSSを適用して実際にやってみます。

 

<div class="l_parent">
    <div class="l_child">text</div>
</div>

 

上記のHTMLで２つのdiv要素、l_parentのクラスをつけた親要素をCSSでwidth:100%のボックスにして、子要素のdiv「l_child」のボックスを中央に寄せて配置する場合のCSSです。

 

.l_parent{
    background-color: #00968D;
    width: 100%;
    height: auto;
}
.l_child{
    background-color: tan;
    width: 150px;
    margin: 0 auto;
    padding: 20px;;
}

 

CSSのmarginプロパティを子要素のdiv、上記のCSSならl_childにmargin: 0 autoで記述して指定します。また子要素のdivの幅は150pxのサイズで親のボック内の中央に配置するような例にしてます。

 

 

そうするとCSSのmargin: 0 autoの指定は子要素のdivのボックスに適用ができるので、親要素のdivボックス内の中央に配置できます。

 

 

子要素に記述したmargin: 0 autoの記述を検証ツールで外してみるとボックスが親のボックス内で左に寄るので、中央に配置したCSSの適用が視覚的に覚えやすいです。

今回はCSSのmarginで中央にボックスを配置するやり方をmargin: 0 autoと値を「0 auto」にしました。

0 autoの0はmarginの上下、autoはmarginの左右を指定しています。そのため左右の中央寄せを保ったまま上下に余白をつけたいときには、例えばmargin: 20px auto;に記述を変えると「上下に20px分の余白がある左右は中央配置」にしたボックスが作れます。

 

Advertisement

 

<div class="l_parent">
    <div class="l_child">text</div>
    <div class="l_child">text</div>
    <div class="l_child">text</div>
</div>

 

上記のHTMLのように親要素のdivに子要素のdivが複数ある場合などでは、CSSのdisplay: flexを使用して中央に配置するやり方を覚えておくのも便利なのです。

 

.l_parent{
    background-color: #00968D;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}
.l_child{
    background-color: tan;
    width: 150px;
    margin: 20px 10px;
    padding: 20px;
}

 

複数のdivをまとめている親要素のdivにdisplay: flexを記述すると子要素が親要素のボック内で横並びになります。

そして親要素のdivにjustify-content: center;も記述します。

 

 

すると親要素のボックス内で横並びになった子要素の複数のボックスが、justify-content: centerの適用により親要素の中で中央配置にすることができます。このとき複数ではなく１つだけのdivの子要素ボックスにしても中央配置になります。

 

中央配置したボックス内のテキストを中央寄せ

 

ここまで説明したmarginとdisplay: flexを使用したCSSでボックスを中央に配置するやり方をすると、以下の画像のように中央配置したボックス内のテキストは子要素のボックスの中で左寄りの配置でテキスト表示します。

 

 

左寄りではなく中央配置したボックス内で、テキストを中央寄せにするやり方も覚えてみてください。

 

<div class="l_parent">
    <div class="l_child">text</div>
    <div class="l_child">text</div>
    <div class="l_child">text</div>
</div>

 

上記のHTMLの記述は先ほどCSSのdisplay: flexでボックスを中央に配置するやり方のときに使用したHTMLです。この子要素のボックス内のテキストを中央寄せにするのを例にしてやってみます。

 

.l_parent{
    background-color: #00968D;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}
.l_child{
    background-color: tan;
    width: 150px;
    margin: 20px 10px;
    padding: 20px;
    text-align: center;
}

 

CSSでtext-align: center;をテキストを中央に配置したい要素に記述します。上記のCSSなら子要素のボックス内のテキストを中央寄せにするのでl_childのクラスを付けているセレクタにtext-align: center;を記述します。

 

 

するとCSSでtext-align: center;を指定した子要素のボックス内でテキストの中央寄せが適用できます。

text-align: centerを指定する要素によっては中央に寄らないことがあるので、その場合は親要素にtext-align: centerを記述して試してみてください。

 

CSSで中央寄せした背景画像のボックス

 

CSSで背景画像を表示させるときに、divでマークアップした要素のボックスにCSSでbackground-imageを指定して背景画像を表示すると共にmargin: 20px autoのように記述して中央寄せにすることで「できたぜ！」って満足することがあります。

 

 

しかし細かく画像位置を見ると中央に寄せたボックスの幅や高さ、使う画像サイズによっては「なんか背景画像の位置ズレてね？」みたいなときがあり、中央に寄せたいことがあります。

 

 

そんなときにはbackground-imageで表示した背景画像をCSSのbackground-position: centerを記述して中央寄せした背景画像に配置できます。

 

.img_btn_center {
    background-image: url(./images/smple1.jpg);
    width: 90%;
    margin: 20px auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 50%;
}

 

background-positionの値を「center」にしても「center center」でも「50% 50%」で指定しても背景画像は中央寄せで配置できます。

 

Advertisement

 

画像の中央ど真ん中に文字を配置するCSS

 

CSSで背景画像の位置を中央に配置するやり方を覚えるときに一緒に覚えておくと良いかと思うのは「画像の中央ど真ん中に文字を配置するCSS」です。

CSSのposition: relative;とposition: absolute;そして擬似要素でtransform: translate(-50%, -50%);を組み合わせたやり方です。

 

<div class="img_btn_center"></div>
Advertisement
.img_btn_center{
    position: relative;
    background-image: url(./images/smple1.jpg);
    width: 100%;
    margin: 20px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 50%;
   overflow: hidden;
}
.img_btn_center::before{
    background-color: rgba(230, 230, 230,.6);
    width: 100%;
    max-width: 300px;
    padding: 20px;
    content: "beforeビフォアーbeforeビフォアーbeforeビフォアーbeforeビフォアーbeforeビフォアーbeforeビフォアー";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

 

CSSで背景画像を適用する要素にposition: relativeを記述します。そしてCSSの::beforeで同じ要素の擬似要素を作ります。上記のCSS記述例なら.img_btn_center::beforeです。

.img_btn_center::beforeのセレクタにはposition: absoluteを記述してtop: 50%;とleft: 50%;も記述します。

 

 

top: 50%;とleft: 50%;だけでは画像の中央ど真ん中に文字が配置できないので、トドメにtransform: translate(-50%, -50%);を指定してあげると、CSSで画像の中央ど真ん中に文字を配置することができます。背景画像のサイズ調整はお好みです。

説明した画像の中央ど真ん中に文字を配置するやり方を理解してから、特に理由もなく背景画像の上にコンテンツを乗せて遊ぶことが多くなり、私自身、覚えてよかったなと思えた中央寄せテクニックです。

 

CSSでテキストの上下中央揃え

 

私はCSSでテキストの上下中央揃えに悩んだことがあります。

テキストの文字数が決まっていてボックスの高さを絶対値で指定した場合、ボックスの上揃えになってしまいシクシクと悲しくなります。

 

 

しかしdisplay: flex;を使用した上下中央揃えのやり方に巡り会うことで簡単にテキストが上下中央揃えになってくれるのです(ニコッ)。以下のHTMLとCSSを例にしましたので読み進めてみてください。

 

<div class="side_text_center">
    <p>テキストtextテキストtextテキストtextテキストtextトテキストtextテキストtext</p>
</div>

 

CSSでテキストの上下中央揃えにするHTMLは上記のdivのボックス内でp要素のテキストです。

 

.side_text_center{
    width: 100%;
    max-width: 350px;
    height: 300px;
    display: flex;
    align-items: center;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, .8);
}
.side_text_center p{
    padding: 35px;
    background-color: rgba(0, 0, 0,.5);
    color: gold;
    letter-spacing: 0.1em;
}

 

CSSでdivをheight: 300pxの高さにするとdivのボックス上辺で、pの子要素に適用したpadding: 35px分の余白を付けて配置されます。このとき親要素のボックスにCSSで「display: flex」と「align-items: center」を記述します。

 

 

するとp要素のテキストは上下中央揃えで親要素のボックス内に配置できます。

CSSでテキストの上下中央揃えにするやり方がこんなに簡単にできるとは思っていなかったので、display: flexを覚えてよかった瞬間でした。

CSSカテゴリの最新記事