💡

【css】縦中央にabsoluteで配置する

2022/03/22に公開

方法

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

1行だけの場合はabsolute使わずにline-heightを親の高さと合わせれば縦中央にもできます。

解説

top: 50%;だけだと、頂点が真ん中に来てしまうので、translateYで調整します。

Discussion