CSSの中央寄せ・レイアウトのコピペ集10選（縦横中央・横並び・カード一覧）

「中央に置きたいだけなのに、置けない」——CSSでいちばん検索されている悩みです。この記事は、中央寄せから横並び・カード一覧・ページ全体の骨組みまで、毎回使う定番レイアウトを動くデモつきで10個まとめました。コピペして、数字を自分のページに合わせるだけで使えます。

CSSFlexboxで横に並べる「なぜこれで並ぶのか」を仕組みから知りたい人は、CSSコースのFlexboxの回へ

中央寄せ：まずはここから

文字を中央に

見出しやボタンの中の文字を中央にするだけなら、これで終わりです。

.box {
  text-align: center;
}

ボックスを左右中央に

ボックスそのものを中央に置くには、幅を決めてmargin: auto。「幅が決まっていること」が条件です。

.card {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

縦横のど真ん中に

「縦も横も中央」は、親にflexを3行書くのが現在の決定版です。迷ったらこれ。

.center {
  display: flex;
  justify-content: center;  /* 左右の中央 */
  align-items: center;      /* 上下の中央 */
  height: 300px;            /* 親に高さが必要 */
}

横に並べる

等間隔に横並び

ボタンやアイコンを、すきまをそろえて並べます。すきまはgapの1か所で管理。

.row {
  display: flex;
  gap: 12px;
}

両端に振り分ける

左にロゴ、右にメニュー——ヘッダーの定番はspace-betweenです。

.header {
  display: flex;
  justify-content: space-between;  /* 両端に振り分け */
  align-items: center;             /* 上下は中央でそろえる */
}

画像と文章を横並びに

プロフィールやお知らせの定番。画像は固定幅、文章は残り全部（flex: 1）です。

.media {
  display: flex;
  gap: 16px;
  align-items: center;
}
.media-icon { flex-shrink: 0; }  /* 画像側は縮ませない */
.media-body { flex: 1; }         /* 文章側が残りを使う */

カードを自動で折り返して並べる

Gridのauto-fitを使うと、画面の幅に合わせて列の数が勝手に変わるカード一覧が1行で作れます。メディアクエリいらずの必殺技。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

読み方は「140px以上とれる列を、入るだけ作って均等に」。140pxがカードの最小幅です。

ページ全体の型

コンテンツを真ん中の帯に

文章がだらーっと画面いっぱいに広がらないよう、読みやすい幅の帯に収めます。ほぼすべてのサイトで使われている型です。

.container {
  max-width: 800px;      /* これ以上は広がらない */
  margin-left: auto;     /* 帯ごと左右中央へ */
  margin-right: auto;
  padding: 0 16px;       /* 狭い画面での両端の余白 */
}

<body>直下を<div class="container">で包むだけ。widthではなくmax-widthなので、スマホでは画面なりに縮みます。

フッターをいちばん下に貼り付ける

内容が少ないページでフッターが浮き上がってこないように、ページ全体を縦のflexにします。

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* 最低でも画面の高さ */
}
.main { flex: 1; }     /* 中身が余った高さを全部使う */

中央寄せできないときのチェックリスト

コピペしても効かないときは、たいてい次のどれかです。

text-align: centerが効かない → それはブロック（箱）ではありませんか？箱そのものはmargin: autoか親のflexで寄せる
margin: autoが効かない → 幅を決めましたか？width（またはmax-width）が無いと寄りません
縦の中央が効かない → 親に高さはありますか？（上のつまずきポイント参照）
<span>や<a>に幅・高さが効かない → インライン要素です。display: inline-blockかdisplay: blockに変える

まとめ

中央寄せの決定版は親にflexの3行（justify-content＋align-items＋高さ）
横並びはdisplay: flex＋gap、ヘッダーはspace-between、カード一覧はGridのauto-fit
効かないときは「幅はあるか・親に高さはあるか・インラインではないか」の順に疑う

この10個を手元に置いておけば、レイアウトで手が止まる時間はぐっと減ります。

コピペで使えるCSSレイアウト集