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

方法１：flexboxを使う

CSS

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

解説

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

方法２：absoluteで配置

CSS

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

解説

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