【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;
}

関連記事

【CSS】CSS3で実現するドロップシャドウ効果

画像処理のソフトなどには、文字やオブジェクトに影をつける「ドロップシャドウ」という機能があります。 ボタンや写真などに「ドロップシャドウ」使うことで立体的に表現することができるのでよく使われる効果のひとつです。 画像処理のソフトなどで行う「ドロップシャドウ」効果を...続きを読む

2015.02.09HTMLコーディング

【WP】ソーシャルボタンを設置できる「WP Social Bookmarking Light」の導入方法

ソーシャルメディアを通じて「いいね」と評価される記事が共有され多くの人に広がることは、第三者から好評を得ている、評判がいいことが多いと思います。 またSEOにおいては、内容が良いものはより上位に掲載されるという考え方があり、ソーシャルメディアで評価されることはSEO対策にも...続きを読む

2015.04.14WordPress

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室

【WP】カテゴリーやタグにサムネイルを反映するプラグイン「Taxonomy Thumbnail」

WordPressでサイトを構築して、記事を投稿するとき「カテゴリー」や「タグ」をつけることができます。一般的に「カテゴリー」や「タグ」にはテキストを設定して、表示もテキストを中心にしたものが多く、装飾などはCSSや画像を組み合わせて表現していることが多いと思います。 今回...続きを読む

2016.07.02WordPress

藤枝おんぱく『着物でまちあるき』(4/25)

藤枝おんぱく『着物でまちあるき』(4/25)満開の藤が咲く蓮華寺池公園まで、お気に入りの着物で「まちあるき」をするプロジェクトです。八百年の歴史ある「熊谷山 蓮生寺」での着付け体験に加え、「匂い袋づくり」「着物とマナーの話」と盛り沢山の様子のフォトレポートをお届けします。 ...続きを読む

2015.05.01フォトギャラリー