記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS】左右中央寄せ+上下左右中央寄せ サンプルコード付き(初心者向け)

各ケースに合わせた中央寄せの方法を初心者のかた向けに解説。 基礎知識・使用方法をサンプルコード付きで詳しく説明し、「このケースであればこの方法!」と詳しく解説しているため、すぐに実践的に活用できる様になります。

カテゴリ: HTML/CSS

こんにちは!
最近、WEB制作をはじめたけど「左右中央寄せってどうやるの・・?」「左右だけではなく上下も中央寄せってできるの・・?」「実践的に上下左右中央寄せをしたい・・!」
そんな風に考えている、初心者WEB製作者の方も多いのではないでしょうか?
上下左右中央寄せをする事ができなければ、WEB制作の幅は狭くなてしまうでしょう。
でも安心してください、上下左右中央寄せにするのは簡単で、理屈を理解してしまえば誰にでもできる様になります。
「中央寄せ」と一言で言っても適材適所があるのでケースに合わせて、初心者の方向けにサンプルコード付きで、詳しく解説していきます。

中央寄せ

text-align-centerで中央寄せ

「text-align: center;」は「文章・画像」を中央寄せにするのに最適な方法です。
それではそれぞれ詳しく解説していきます。

文章を中央寄せ

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素となる「parent」に「text-align: center;」を指定する事で、文章を真ん中に表示する事ができます。
もしくは「p」要素に「text-align: center;」を指定しても、文章を真ん中に表示する事ができます。(<p>は文章の親要素)

ポイントは文章の親要素に「text-align: center;」を指定する事がポイントです、上記は「parent」「p」ともに文章の親要素であります。

ちなみに「text-align: center;」ではブロック要素自体を中央寄せにする事はできません。

画像を中央寄せ

サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

画像も親要素にtext-align center;を指定する事で中央寄せする事ができます。

文章、画像を中央寄せするには「text-align: center;」が適していますが、ブロック要素自体を中央寄せにする事ができないので注意してください。

margin-autoで中央寄せ

ブロック要素を中央寄せするのに最適な方法です。
ブロック要素とは、<p>、<div>、<h1>〜<h6>タグに代表されるもので、ブロック要素について詳しく知りたい方は、下記を参照にしてください。
http://www.htmq.com/htmlkihon/005.shtml

親要素を「parent」子要素を「child」に変えた例を出します。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素(parent背景色、青)に横幅、高さ、背景色を指定し親要素を分かりやすくしました。
子要素(child背景色、赤)にmagin: auto;を指定し、子要素が親要素の真ん中に表示される様にしました。

つまりブロック要素にmargin: auto;を指定して中央寄せにするには、親要素、子要素の関係が重要になり、常に親要素の真ん中に子要素が配置されます。
また、margin: autoではインライン要素を中央寄せにすることはできません。

inline-blockで中央寄せ

「text-align: center;」を使用し、ブロック要素をinline-block要素にして中央寄せしたい場合の方法です。
inline-block要素とは「ブロック」「インライン」の中間の要素で、ブロックのように幅、高さを指定でき、インラインの役割もできる要素です、詳しく知りたい方は下記を参照にしてください。
https://www.itra.co.jp/webmedia/what-is-inline-block.html

「text-align: center;」を使用してブロック要素を中央寄せにする事はできませんが、ブロック要素をinline-block要素に変えて「text-align: center;」を使用し中央寄せにする事はできます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
ブロック要素は「text-align: center;」で中央寄せにする事ができませんが、inline-block要素に変更する事で 親要素に「text-align: center;」を指定し中央寄せをする事ができます。
今回の例だと、「child」はブロック要素ですが、 CSSでdisplay:inline-block;を指定しinline-block要素に変更→親要素の「parent」に 「text-align: center;」を指定し中央寄せを表示するながれとなります。

display flexで中央寄せ

ブロック要素を中央寄にする事もでき、さらにブロック要素を横並び、並びの均等わり、縦方向の変更など、あとからの細かい調整に対応できる方法です。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素「parent」に「display: flex;」プロパティを指定し、中央寄せを意味する、「justify-content: center;」プロパティを指定する事で、子要素「child」を中央寄せに表示する事ができます。

ここまでだと「margin」で中央寄せにするのと変わりません。
「中央寄せ」という役割だけで見ると同じですが「display: flex;」はレイアウトの細かい調整、自由度の高い表現を簡単にできることがメリットで、後からの変更に対応しやすいです。
下記より分かりやすい簡単な例を紹介します、中央寄せだけを知りたい方は、飛ばして読んでください。

ブロック要素3つを均等に配置する

親要素の中に子要素3つを配置し、均等幅で横並びにします。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素「parent」に「display: flex;」を指定し、均等幅になるプロパティ「justify-content: space-between;」を指定し、子要素「parent-1」「parent-2」「parent-3」を均等割に表示する事ができます。

「display: flex;」のメリットは「justify-content: center;」「justify-content: space-between;」のようにプロパティを指定するだけで簡単に中央寄せ、均等割などレイアウトの指定ができる事です。

この他にも左揃え、右揃え、縦方向の位置を揃えるなど、横、縦と様々な位置にレイアウトを簡単に変更できるプロパティが数多く用意されています。
WEB制作をしていると、後から中央寄せ以外に変更したいケースは多々でてくるので、「display: flex;」で中央寄せをしておく事はオススメです。

position+transformで中央寄せ

positionとtransformを使用してブロック要素の中央寄せを行います。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
まず親要素「parent」に「position: relative;」を指定し親要素の位置を指定、
子要素「child」に「position: absolute;」を指定し「left: 50%;」を指定し半分の真ん中の位置に指定します。
しかしこれだと子要素の開始位置、つまり左端が50%(真ん中)に配置されてしまうので、「transform: translateX(-50%);」を指定し、子要素「child」の大きさ分の-50%分の大きさを戻し、中央に表示しています。

上下左右中央寄せ

ここまでは左右の中央寄せでしたが、上下をプラスした上下左右中央寄せ、つまりど真ん中の指定の方法を解説していきます。

line-height+text-align: centerで上下左右中央寄せ

文章を上下左右中央寄せにするのに適しています。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
まず「text-align: center;」を指定し「文章1」という文字を真ん中に寄せます。
続いて、縦方向を真ん中に配置するために、「line-height」プロパティを使用します。
要素の高さ(赤色のブロック)が200pxなので「line-height」も値を200pxと指定する事で、文章を上下真ん中に表示する事ができ、2つの結果、上下左右中央寄せを表示する事ができます。

position+margin autoで上下左右中央寄せ

position+margin autoの2つのプロパティを利用して、ブロック要素を上下左右中央寄せに表示させます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素「parent」に「position: relative;」を指定、子要素「child」に「position: absolute;」を指定し、 位置の値を「 top: 0;」「right: 0;」「 bottom: 0;」「left: 0;」に指定します。
そして「margin: auto」を指定する事で上下左右中央寄せを表示する事ができます。

display: flexで上下左右中央寄せ

「display: flex;」プロパティを使用しブロック要素を上下左右中央寄せに表示させます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素「parent」に「display: flex;」を指定し「justify-content: center;」を指定する事で、左右中央寄せを行い、「align-items: center;」を指定し上下中央寄せにします。

transformで上下左右中央寄せ

「transform」を使用しブロック要素を上下左右中央寄せに表示させます。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
まず親要素「parent」に「position: relative;」を指定し親要素の位置を指定、
子要素「child」に「position: absolute;」を指定し「top: 50%」「left: 50%;」を指定し半分の真ん中の位置に指定します、しかしこれだと子要素の開始位置、上左端が50%(真ん中)に配置されてしまうので、「translateY(-50%)」「transform: translateX(-50%);」を指定し、子要素「child」の大きさ分の-50%分の大きさを戻し、真ん中かに表示を行いました。

table-cellで上下左右中央寄せ

「display: table-cell;」を使用し、文字を上下左右中央寄せに表示します。
サンプルコード表示結果

HTMLサンプルコード

CSSサンプルコード

※解説
親要素「parent」に「display: table;」「 display: table-cell;」を指定する事で、子要素に「vertical-align: middle;」を指定できる様になります。
続いて「vertical-align: middle;」で上下真ん中に文字を表示し、「 text-align: center;」を指定し左右真ん中に文字を指定する事で、上下左右中央寄せに文字を表示することができます。

まとめ

今回は、初心者の方向けに「左右中央寄せ」「上下左右中央寄せ」の方法をサンプルコード付きで詳しく解説してきました。
ポイントをまとめます。

1.中央寄せをする方法を5点紹介
①text-align-center(文章・画像)
②margin-auto(ブロック要素)
③inline-block(ブロック要素をインライン要素にして)
④display flex(ブロック要素)
⑤position+transform(ブロック要素)

2.上下左右中央寄せする方法5点紹介
①line-height+text-align: center(文章)
②position+margin auto(ブロック要素)
③display: flex(ブロック要素)
⑤transform(ブロック要素)
⑥table-cell(文章)

いかがだったでしょうか?

やり方を試していくうちに、「この場合はこの方法で中央寄せにする」というコツが掴めてきます、これを機会に色々な方法でチャレンジしてみて下さい。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。