こんにちは、けいすけです。
トップページなどで、画像の中心に文字などを配置しているのをよく見かけますよね。
今回は、要素を、親要素の中心に配置するために使える4つの方法についてご紹介したいと思います。
使用するHTMLはこちら
<div class="wrapper">
<div class="box">box</div>
</div>
目次 [表示する]
position: absoluteで中央寄せする方法①
.wrapper {
widht: 100%;
height: 500px;
position: relative;
}
.wrapper .box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
中央寄せの方法として最もポピュラーな方法がこちらではないでしょうか。
親要素の上端と左端から、親要素の半分の距離を取り、中央寄せの対象となる要素の半分の高さと幅で位置を調整しています。
topやleftで指定した値は、要素の左上の位置に適用されるため、transformで位置を調整する必要があります。
注意点としては、親要素にposition: relativeを設定しないと、親要素とは全く関係のないところに表示されてしまうことです。
position: absoluteで中央寄せする方法②
.wrapper {
widht: 100%;
height: 500px;
position: relative;
}
.wrapper .box {
position: absolute;
width: 100px;
height: 100px;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
こちらも、上記と同様に、親要素にpositon: relative, 対象となる要素にposition: absoluteを使用する方法です。
top, right, bottom, leftそれぞれの値を0に設定し、margin: autoとすることで、上下と左右のmarginを均等にする方法です。
注意点としては、中央寄せの対象となる要素に、widthとheightを指定しないと、親要素いっぱいに広がってしまうことです。
display: flexで中央寄せする方法
.wrapper {
widht: 100%;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
こちらは、親要素にのみスタイルを適用する方法で、簡単に中央寄せすることができます。
display: flexは、複数の要素に対して、横に並べたりするときによく用いられますが、
要素が一つだったとしても問題ありません。
justify-content: centerとalign-items: centerは、それぞれ主軸および交差軸に対する配置を中央寄せする際に用いられます。
display: inlineの要素を中央寄せする方法
.wrapper {
widht: 100%;
height: 500px;
text-align: center;
line-height: 500px;
}
.wrapper .box {
display: inline;
}
こちらは、aタグやspanタグのような、display: inlineの要素に対して中央寄せする方法です。
また、pタグや、divタグのような、display: blockの要素においても、その内容となるテキストに適用することが可能です。
text-align: centerは、テキストを中央寄せします。
line-heightで、行の高さを親要素のheightの高さと同じ値にすることで、上下中央の位置に配置しています。
注意点としては、行が複数ある場合に、この方法では、上下に中央寄せできないということです。
