🤔

【css】ど真ん中に配置する2つの方法

2022/03/22に公開約400字

方法1:flexboxを使う

CSS

display: flex;
justify-content: center;
align-items: center;

解説

flexboxで縦並びと横並びを全て中央に設定することでど真ん中に配置されます。
こっちの方がシンプルかも。

方法2:absoluteで配置

CSS

position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);

解説

topとleftだけだと左上がど真ん中にくるので、translateで調整します。

GitHubで編集を提案

Discussion

ログインするとコメントできます