Programming

cssのみで要素を上下中央に配置する方法(top:0,bottom0でもダメだった場合)

2019/05/12

コーディングで上下中央に配置したい時に
top: 0;
bottom: 0;
で配置しようと思うことも多いのですが、他要素の都合によりこれが聞かないことがままあります。

そんな時は、上下中央に配置したい要素に下記のcssを追加してください。

position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin: auto;

という記述です。
※親要素にposition: relative;を入れてください。
またabsoluteのため親要素の高さに依存しますので親要素には必ず高さが存在するようにしてください。

こちらを使えば簡単に上下中央に要素を配置することができます。
私もよく使ってます。