CSS 文字を中央寄せにする

CSSで文字や画像を中央寄せするにはtext-alignやposition: absoluteを使うことで実現できます。

• 文字・画像を左右中央寄せにす
• 文字・画像を上下左右中央寄せにする
• <div>を左右中央寄せにする
• flexboxを左右中央寄せにする

デモ

See the Pen
css centering by kura (@kuranopen)
on CodePen.

文字・画像を左右中央寄せにする

<p>の文字、<img>の画像を中央寄せにします。
text-align: centerを指定します。

p{
    text-align: center;
}

文字・画像を上下左右中央寄せにする

文字・画像を天地中央の中央寄せにします。
<div>にも使用できます。

heightで高さを指定し、position: absoluteとtop: 50%、left: 50%、transform: translate(-50%, -50%)で位置を指定します。

.joge-sayu-chuo-box{
  position: relative;
  height: 200px;
}
.joge-sayu-chuo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div>を左右中央寄せにする

<div>を左右中央寄せにします。
marginの左右をautoにします。

.div-sayu-chuo{
  margin: 0 auto;
  width: 200px;
}

flexboxを左右中央寄せにする

flexboxを使って左右中央寄せにします。
flexboxにjustify-content: centerを指定します。

.flexbox-sayu-chuo-box{
  display: flex;
  justify-content: center;
}
.flexbox-sayu-chuo{
  width: 200px;
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選