代替テキスト

CSSで要素を縦横中央配置する方法はいくつかあり、よく使われているのは、display:table;やネガティブマージンを使った方法だと思います。
今回は、そんないくつかある「縦横中央配置するための方法」をまとめました。

CSSで要素を縦横中央配置する方法

HTMLの方はだいたい同じようなものを書いていますが、CSSの書き方がどれも違う方法を使って縦横中央配置しています。

1.display:table;を使う

See the Pen BoxCenter - Table by mamigaku (@mamigaku) on CodePen.

display:table;を使い、縦方向は、vertical-align: middle;で中央へ、横方向は、text-align: center;で中央へ配置しています。

2.ネガティブマージンを使う

See the Pen BoxCenter - NegativeMargin by mamigaku (@mamigaku) on CodePen.

まずは、親要素に対して子要素が半分の位置にくるようにします。
あとは、子要素の横と高さの半分をネガティブマージンで指定します。

3.display:inilne-block; (::before)を使う

See the Pen BoxCenter - InlineBlock_before by mamigaku (@mamigaku) on CodePen.

要素をinilne-blockし、縦方向をvertical-align: middle;で中央へ設置しています。
ただ、この方法、親要素の高さを取得していないと中央配置できないのが難点なところ。

4.position: absolute;を使う

See the Pen BoxCenter - absolute by mamigaku (@mamigaku) on CodePen.

以下のリンクにて詳しく解説されていますので、そちらを参照してください。
とてもわかりやすいです。

5.子要素の大きさをCSSで指定しない

See the Pen BoxCenter - InlineBlock by mamigaku (@mamigaku) on CodePen.

3つ目と似ているのですが、こちらは、子要素の大きさを指定していません。

6.縦の中央配置

最後に、縦横中央配置ではないのですが、縦方向を中央にしてくれます。
(※デモでは、横も中央にしてみました。)
ネガティブマージンではなく、transformを使って、縦方向を中央に設置しています。

最後に、以下に1から5までのデモをまとめました。
全体を見たい方はこちらをご覧ください。

対応ブラウザ Google Chrome / Safari/ Firefox / Opera / IE

display:table;を使うのが、簡単で柔軟に対応できるかなと思うのですが、やはりちゃんと全体をみて、それぞれ使い分けていけるようになりたいですね。

ADVERTISEMENT

Author:

follow FacebookPage

当ブログがお気に召しましたら是非いいね!をお願いします!

Follow Me

閲覧頂きありがとうございました:)

Message

トップへ戻る