CSS 文字を中央寄せにする

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

デモ

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

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

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

p{
    text-align: center;
}

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

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

heightで高さを指定し、position: absolutetop: 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;
}
  • このエントリーをはてなブックマークに追加

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。