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

関連記事

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

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

2015.05.01フォトギャラリー

富士山本宮浅間大社「桜」フォトギャラリー

富士宮にある富士山本宮浅間大社で桜を見てきました。ちょうど天気もよく青空に映えるキレイな桜を写真に撮ることもできました。 富士山本宮浅間大社は、富士山の龍脈の気が留まる龍穴(大地の気がみなぎる場所)のパワースポットとして開運神社として知られています。 主祭神には、神界...続きを読む

2015.04.09フォトギャラリー

【WP】author.phpを使用したページでユーザー名が表示されない?

ワードプレスでは、テーマに[author.php]を用いると、ユーザーアカウント事の記事の一覧ページを作成することができます。[author.php]は、アーカイブページの分類に入りますので、[author.php]が無い場合は[archive.php]が反映されます。 ユ...続きを読む

2018.08.10WordPress

ロリポップの簡単インストールで「WordPress」のインストールに失敗した!?

WEBサイトを構築・公開するために必要となるレンタルサーバー。数あるレンタルサーバーの運営サービスで、価格も手ごろなロリポップを利用する方も多いと思います。ロリポップではWordPressを簡単にインストールすることができますが、簡単インストールの途中で「インストールできませんで...続きを読む

2017.09.17WordPressレンタルサーバロリポップ

【WP】WordPressのアーカイブリストの「年月」表示をカスタマイズする

WordPressでは投稿された記事に対して、年別や月別のアーカイブを生成できます。アーカイブのリスト表示は2014年1月というように掲載されますが、年や月の表示を変えて表示したいこともあります。 アーカイブの日付表示 投稿された記事の日付の形式はWordPr...続きを読む

2015.02.19WordPress