positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか? 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。(わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください) 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html
![【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a95ea0cb83660953045fb339dd13b247d958aa5b/height=288;version=1;width=512/https%3A%2F%2Farts-factory.net%2Fwp-content%2Fuploads%2F2019%2F01%2Fpositioncenter.jpg)