CSS | position: absoluteで要素を縦横中央揃えをする方法
CSSのpositionプロパティでabsoluteを指定して、要素を縦横中央揃えをする方法を紹介しています。
「position:absolute;」で、縦または横の中央揃えをする方法で良く使われる方法は二通りあり、「margin」プロパティを使った方法と縦・横の50％を指定して要素サイズの50％を引いた位置を指定する方法があります。
縦横中央揃えする方法1
「position:absolute;」にて要素を縦横中央揃えにする方法で一般的なのが上下左右の各ポジションを50％に設定して、「transform」プロパティで位置を調整する方法になります。
See the Pen CSS Text Mask (background-clip) by yochans (@yochans) on CodePen.
.container {
position: relative;
width: 100%;
height: 220px;
background: #000;
}
.item {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba( 0, 176, 255, 0.7);
}「top」と「left」で50％を指定しただけでは、中央地点から要素の左上が始まるので右下寄りになってしまいます。
そこでtranslateで「-50%」を指定することで要素サイズの50％を左または上に移動させることで中央に表示するようにしています。
また、縦のみ・横のみを中央揃えにする場合は「translateX()」や「translateY()」も利用できます。
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateY(-50%);
-webkit-transform: translateY(-50%);縦横中央揃えする方法2
要素を縦横中央に配置する他の方法として上下左右の各ポジションに「0」を指定して、「margin」プロパティで「auto」を指定する方法がありますので紹介します。
See the Pen CSS centered with position absolute 1 by yochans (@yochans) on CodePen.
.container {
position: relative;
width: 100%;
height: 220px;
background: #000;
}
.item {
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: rgba( 0, 176, 255, 0.7);
}「margin: auto」での中央揃えは「position:absolute;」以外の場面でも利用されることのある方法ですが、この方法は要素のサイズが確定している場合にのみ利用できます。
「width」と「height」の指定がない場合は中央揃えにはなりません。
例えば、中央揃えにする要素の中身がテキストで、そのテキスト量や「padding」の大きさによって要素のサイズが変化する場合などでの利用は難しくなると思います。
基本的には細かい位置調整も可能な先の方法を利用した方が「position」プロパティをより有効に使えるものと考えております。
縦のみ・横のみを中央揃えにする場合は、「margin」の「auto」指定を縦または横のみを指定することで実装可能です。
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;中央揃えにならない場合の原因など
中央揃えにならない場合の原因などをまとめておきます。
- 中央に揃えたい要素のサイズが100％になっている
- 背景色が透明な要素の中身が中央寄せになっていない
- marginやpaddingなどの影響を受けている
などなど。
See the Pen CSS centered with position absolute x pattern by yochans (@yochans) on CodePen.
上のサンプルの場合、背景に色を付けているのでわかりやすいですが、要素の中身の位置が中央でないので、背景がなかった場合は中央揃えできていない状態に見えてしまいます。
経験上、要素のサイズが100％というか最初からブロック要素の<p>タグなどを指定している場合に多く遭遇してしまう気がします。