menu
menu

キーワード検索

 

前月(11月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 4 - ) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  6. ( 5 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  7. ( 9 ↑) 【jQuery】入門2. jQueryをHTMLに組み込む
  8. ( 8 - ) 【CSS】レスポンシブデザインのブレークポイントは⁉
  9. (10 ↑) 【Mac】iMovieの保存場所を変更する
  10. ( - ↑) 【PHP】PHPでシンプルなメールフォーム
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

関連リンク

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

  • CSS3 センタリング
このエントリーをはてなブックマークに追加