KH-WEBLOG TOP > WEBメモ > CSS > CSSのpositionで上下左右中央揃えにする方法

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%から要素の半分の数値を引いた数値
にすることで上下左右中央揃えになります。

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事