CSSのpositionで上下左右中央揃えにする方法 | コーディング・プログラミング・WEB制作ブログ

CSSのpositionで上下左右中央揃えにする方法

CSSのpositionで上下左右中央揃えにする方法をメモ

要素の中の上下左右中央揃えに配置する方法はいくつかありますが、
今回はpositionを使用した方法をご紹介します。

HTML

<div class="centerbox">
<p>中央配置テキスト</p>
</div>

↑仮にこのようなHTMLでpタグを中央揃えにしたい場合で説明します。

高さや横幅が決まっていない場合【transform】を使用

中央に寄せる要素の高さや横幅が決まっていない場合は

.centerbox{position:relative;}
.centerbox p{
position:absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

のようにtransformで-50%を指定することで上下左右中央揃えになります。

.centerbox p{
position:absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
}

translateYのみの指定にすると上下中央

.centerbox p{
position:absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}

translateXのみの指定にすると左右中央
になります。

高さや横幅が決まっている場合【calc】を使用

仮に、

.centerbox{width:100%;}
.centerbox p{width:300px; height:50px; }

のように高さや横幅が決まっている場合はcalcを使用するのが良いかと思います。

要素を中央揃えにしたい場合は

.centerbox{width:100%; position:relative;}
.centerbox p{
width:50%;
height:50px;
position:absolute;
left:calc(50% - 150px);
top:calc(50% - 25px);
}

のように、
calcで50%から要素の半分の数値を引いた数値
にすることで上下左右中央揃えになります。

案件探しに！絶対登録しておきたいクラウドソーシングサービス3選【評価と経験談】：ビジネス・副業

CSSのおすすめ参考書

これからWebをはじめる人のHTML＆CSS，JavaScriptのきほんのきほ [ たにぐちまこと ]

楽天ブックス

¥2,838 （2024/04/20 21:14時点 | 楽天市場調べ）

Amazon

楽天市場

Yahooショッピング

ポチップ