inline要素の中央寄せ
text-align: center;
block要素の中央寄せ
width: 100px;
margin: auto;
擬似要素の中央寄せ
left:50%;
これで要素の左側が中央に寄る
transform: translateX(-50%);
これで要素の真ん中が中央に寄る
擬似要素の上下左右中央寄せ
left:50%;
これで要素の左側が中央に寄る
top: 50%;
これで要素の上部が中央に寄る
transform: translateY(-50%) translateX(-50%);
これで上下左右が中央による
中央寄せ（flex-box）
display: flex;
これで横並びになる
justify-content: center;
これで左右中央に寄る
align-items: center;
これで上下中央に寄る