【Labs】要素のいろいろな画面中央配置の仕方

こんにちは（・∀・）

CSSを使用して要素を画面の「左右」中央、または画面の「上下左右」中央に配置するいくつかのサンプルをご紹介したいと思います。

CSS3を使用してコーディングすることができるようになってきた昨今、その設定方法も増えましたので改めてご紹介していきます。

センタリング・画面「左右」中央配置

いろいろなやり方で子要素を画面「左右」中央に配置します。親要素の横幅はどれも100%です。

1. text-align属性

text-align属性・値centerを使用して子要素を画面「左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.oya-youso {
  text-align: center;
}
.ko-youso {
  background: #9fb7d4;
}

2. margin属性

margin属性・値autoを使用して子要素を画面「左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.ko-youso {
  background: #9fb7d4;
  width: 600px;
  height: 200px;
  margin: 0 auto;
}

3. position属性・margin属性

position属性・margin属性を使用して子要素を画面「左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.ko-youso {
  background: #9fb7d4;
  position: relative;
  left: 50%;
  width: 600px;
  height: 200px;
  margin-left: -300px;
}

センタリング・画面「上下左右」中央配置

今度はいろいろなやり方で子要素を画面の「上下左右」中央に配置します。親要素の横幅はどれも100%です。これらサンプルは親要素の高さが必要になる場合があります。サンプル5、6は親要素に高さを指定しないと縦方向のセンタリングは効きませんので、親要素に高さ100vhを設定します。

4. position属性・margin属性

position属性・margin属性を使用して子要素を画面の「上下左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.ko-youso {
  background: #9fb7d4;
  position: absolute;
  top:  50%;
  left: 50%;
  width:  600px;
  height: 200px;
  text-align: left;
  margin-top: -100px;
  margin-left: -300px;
}

5. display属性・justify-content属性・align-items属性

display属性・justify-content属性・align-items属性を使用して子要素を画面の「上下左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.oya-youso {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ko-youso {
  background: #9fb7d4;
}

6. position属性・transform属性

position属性・transform属性を使用して子要素を画面の「上下左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.oya-youso {
  height: 100vh;
  text-align: center;
}
.ko-youso {
  background: #9fb7d4;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

7. position属性・transform属性

position属性・transform属性を使用して子要素を画面の「上下左右」中央に配置します。

HTML

<div class="oya-youso">
<p class="ko-youso">サンプル</p>
</div>

CSS

.ko-youso {
  background: #9fb7d4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

いかがでしたでしょうか、CSS3を使用することができるようになったので、特に画面「上下左右」の中央配置がとても楽になりました。使用用途に合わせて使い分けて見てください。

関連リンク

【CSS3リファレンス】margin
【CSS3リファレンス】position
【CSS3リファレンス】display
【CSS3リファレンス】transform