menu
menu

キーワード検索

 

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

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 5-) 【実践でjQuery入門】jQueryで日時を表示
  6. ( 7↑) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション
  7. ( 6↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( -↑) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. ( 8↓) 【HTML5】HTML5・ページ作成の基本

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

  • Labs

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リファレンス】

  • カテゴリー:Labs