ホームページ制作MATSUTE BLOG

この記事は「2021年01月22日」に書かれた記事です

1. 左右中央（横中央）配置
2. 上下中央（縦中央）配置
3. 上下左右中央（縦横中央）配置

※position 以外の上下（縦中央）、左右（横中央）のCSSは「4-18 上下中央、左右中央にするためのCSS」をご覧ください。

1．左右中央（横中央）配置

例1

• 白い背景部分は親要素です。
• 中央寄せにしたいコンテンツは領域がわかりやすように背景をピンクにしています。

HTML

<div class="box1">
<div class="box2">この文章を縦中央に</div>
</div>

CSS

.box1 {
position: relative;
width:300px;
height: 100px;
background-color: #FFF;
}
.box2 {
position: absolute;
top:0;
left:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

• position: absolute と left:50%でピンクの領域を、白い領域の50％の位置に配置しています。
• この設定のポイントは、「.box2」に設定した、「transform: translateX(-50%)」です。
• ※width: 300px height:100px は説明上設定したものなので、設定が入っていなくても左右中央（縦中央）に配置されます。

transform: translateX(-50%)の設定が入ってない場合、どのように表示されるか見てみましょう

例2

• 白い背景部分は親要素です。
• 中央寄せにしたいコンテンツは領域がわかりやすように背景をピンクにしています。

left:50％が設定されているため、ピンクの領域は白い背景の領域のちょうど半分のところから始まっています。50％の位置に配置したいときには、これでよいのですが、「この文章を横中央に」したい場合はアウトです。

例1で見たように、ピンクの領域に「transform: translateX(-50%);」を設定し、ピンクの領域の半分（50％）を左にずらしておきます。

2．上下中央（縦中央）配置

例1

HTML

<div class="box1">
<div class="box2">この文章を縦中央に</div>
</div>

CSS

.box1 {
position: relative;
width: 300px;
height: 100px;
background-color: #FFF;
}

.box2 {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}

で見てきたように

• position:absolute と top: 50%　で上部から50％の位置にピンクの領域を配置しています。
• 左右中央（横中央）配置の時と同様に、transform: translateY(-50%)　でピンクの領域の縦幅の半分を上部に戻しています。
• ※width: 300px height:100px は説明上設定したものなので、設定が入っていなくても上下中央（縦中央）配置になります。

念のため、transform: translateY(-50%)を設定していない表示も見ておきましょう。

やはりピンクの領域がやや下にずれてしまいます。

3．上下左右中央（縦横中央）配置

ここまでくれば、あとは簡単です。1で見てきた左右中央（横中央）と、2の上下中央（縦中央）を合体させるだけです。

HTML

<div class="box1">
<div class="box2">この文章を上下左右中央（縦横中央）に</div>
</div>

CSS

.box1 {
position: relative;
height: 100px;
background-color: #FFF;
}

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

上下左右（縦横）ともにピンクの領域が白い領域の中央に配置されました。
.box2 に　transform: translate(-50%, -50%);　を設定して、ピンクの領域を上に50、左に50戻しています。

上下左右を設定するには、ほかにもあります。

1つだけご紹介しておきます。

table-cellを使う

HTML

<div class=”box1″>
<div class=”box2″>この文章を縦中央に</div>
</div>

CSS

.box1 {
display:table;
width: 100%;
height:100px;
}

.box2 {
display:table-cell;
text-align:center;
vertical-align:middle;
}

他にもあるので、機会があればまたご紹介します。