【CSS】スタイルシートだけで縦方向と横方向でセンタリングする方法

horizontal-vertical-centering-css

WEBデザインで画像やレイアウトした要素を中央に揃えるレイアウトを作ることがよくあります。実際にHTMLにコーディングをするときに、横位置をセンターにする場合や、縦位置をセンターにする場合などCSSだけで実現する方法をまとめてみました。

{ margin: 0 auto; } を使用した方法

CSSを使い「margin: 0 auto;」という記述でボックス要素を横方向に中央寄せすることが一般的な手法になっています。

horizontal-vertical-centering-css-01

「margin: 0 auto;」で横方向のセンタリングが可能なら、「margin: auto 0;」で縦方向のセンタリングができそうですが縦方向はセンタリングになりません。

horizontal-vertical-centering-css-02

CSSで縦方向に中央寄せする方法をご紹介します。

{ display: table-cell; } を使用した方法

親要素の「table-cell」化で「vertical-align」を有効にすることで縦方向の位置を調整することができます。

horizontal-vertical-centering-css-03

CSS

親要素の「div」に{ display: table-cell; }を指定すると、{ vertical-align: middle; }によって縦方向のセンタリングが可能になります。また横方法も{ text-align: center; }によって指定することができます。

ただし子要素はインライン要素である必要があるため{ display: inline-block; }を指定してインライン要素にしています。

{ text-align: center; }は子要素にも反映されるので子要素内で調整が必要になります。

div.container {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 320px; height: 240px;
	background-color: #666;
}

div.container-in {
	display: inline-block;
	width: 160px; height: 120px;
	background-color: #333;
	text-align: left;
}

{ position: absolute; } を使用した方法-その1-

子要素を{ position: absolute; }として親要素からの縦横の位置を任意で設定することで、縦横のセンタリングが可能になります。

horizontal-vertical-centering-css-04

CSS

ポイントは子要素において全方向「top: 0; left: 0; bottom: 0; right: 0;」の位置指定を行うことです。それぞれの値が「0」でなくても同一値であればセンタリングになります。横方向にのみセンタリングを行う場合は「left: 0; right: 0;」、縦方向にのみセンタリングを行う場合は「top: 0; bottom: 0;」をすることで位置を指定することができます。

.container {
	position: relative;
	width: 320px; height: 240px;
	background-color: #666;
}

.container-in {
	width: 160px; height: 120px;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-color: #333;
}

{ position: absolute; } を使用した方法-その2-

「top」、「left」と「margin-top」、「margin-left」を組み合わせセンタリングを行います。「margin」をマイナス指定でずらすことで調整をしています。

horizontal-vertical-centering-css-04

CSS

.container {
	position: relative;
	width: 320px; height: 240px;
	background-color: #666;
}

.container-in {
	width: 160px; height: 120px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -60px;   /* 要素の高さ ÷ 2 */
	margin-left: -80px;  /* 要素の横幅 ÷ 2 */
	background-color: #333;
}

関連記事

HTML5の可能性とメリット

HTML5とは? W3C より2008年1月22日にHTML5のドラフト(草案)が発表、2014年には正式に勧告されるのではないかと言われています。 HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック用のnav要素、コピーライトなどのフッタ...続きを読む

2015.02.06HTMLコーディング

【CSS】スタイルシートが適用される優先順位について

WEBサイトのデザインでは定番になっているCSS(カスケーディング・スタイル・シート)。最近では、CSSで出来ることも多くなり、自然と記述する内容を多くなってきています。また外部のライブラリーなどを読み込むとCSSのボリュームが増えます。 そうなると、同じ名前の宣言で異...続きを読む

2015.02.06HTMLコーディング

【Win10】Office 2016 の一部が英語表記になり戻らない

Microsoft Office 2016 を Windows10 の環境で利用していたところ、いつの間にか、画面の一部が英語になってしまいました。リボンなどのUI部分ではなく、作業中にポップアップされる操作画面のごく一部の日本語が英語になるという半端な状態です。 修正...続きを読む

2021.01.24Windows10パソコンの使い方

【デザイン】印象に残るビジネスカードデザイン第2弾

以前に「印象に残るビジネスカードデザイン」をテーマにアイディアにあふれるビジネスカード(名刺)をご紹介しました。今回は第2弾目です。 今回もちょっと変わった、もらうと印象に残るビジネスカード(名刺)の事例をご紹介します。 TAM Cargo:Box Busines...続きを読む

2015.04.16インスピレーション

Micro hair saron様WEBサイトのデザイン提案

Micro hair saron様WEBサイトのデザイン提案。店内のインテリアやお店の雰囲気、「シンプル」でありながら心地よさを感じられるようなデザインを心掛けました。お店のコンセプトである「髪だけでなく 時間と空間をデザインして 五感で満足していただくこと。」木の温もりと、...続きを読む

2019.04.24WEBデザイン美容室