positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？
今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。
positionとtranslateを使って要素を中央に配置する方法
具体例と解説
それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。
例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。
完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください）
図
それでは、具体的にソースを示してから解説していきたいと思います。
まずは、htmlとcssをご確認ください。
html
|
1 2 3 4 |
<div class="box"> <p>テキストテキスト</p> <img src=xxx.jpg widht="600" height="400" alt="xxxx" > </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 |
.box{ position: relative; } .box p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } |
この部分は本題にあまり関係ないのでcssの解説は省きますが、htmlで配置したimgの大きさは.boxの大きさと同じだと仮定して考えてください。
ｐ「テキストテキスト」が中央に配置したい要素になります。
cssについてですが、まずは、positionで上下それぞれ50％の位置にｐを配置します。これだけですと、ｐの右上の部分が.boxのちょうど真ん中に配置されたことになります。そこで、transformを使って目的の位置に配置さることになります。transformで上下に-50%を設定すると、ｐの大きさのー５０％分移動してくれます。するとｐがちょうど真ん中に配置されることになります。
まとめ
具体例と解説では、上下左右中央に要素を配置する方法をご紹介しましたが、もちろん上下だけ、左右だけ中央に配置することも可能です。設置方法をまとめましたので是非ご活用ください。
上下左右中央に寄せる場合
|
1 2 3 4 5 6 7 8 |
.box p{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } |
上下を中央に寄せる場合
|
1 2 3 4 5 6 7 8 |
.box p{ position: absolute; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); } |
左右を中央に寄せる場合
|
1 2 3 4 5 6 7 8 |
.box p{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); } |
