position:absolute;を使って要素を配置する際、要素を中央に配置にしたいと思った事は多いかと思います。
そんなときに使用できるCSSの指定方法を紹介いたします。
縦位置(上下)を中央に配置する
/* marginを使用 */
.box {
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
}
/* transformを使用 */
.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}縦位置中央にする以外でもmarginを使用する場合は、要素が幅を持っている必要がありますので、インライン要素はブロック要素に変更する必要があります。
transformでの指定は、現在はほぼ必要ありませんが、必要であれば各種ベンダープレフィックスを追加で記述してください。
横位置(左右)を中央に配置する
/* marginを使用 */
.box {
margin: 0 auto;
position: absolute;
left: 0;
right: 0;
}
/* transformを使用 */
.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
}縦横位置(上下左右)を中央に配置する
/* marginを使用 */
.box {
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* transformを使用 */
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}さいごに
いかがでしたでしょうか。
position:absolute;での要素の配置は使う場面も多いのでしっかりと覚えておいてください。
