絶対を実現する3つの方法

1. 絶対配置と負のマージンを使用する

中央に配置する要素の位置プロパティを絶対指定し、要素の幅と高さの半分をネガティブマージンで上下左右へ移動することで要素を中央に配置します。

.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

1. 絶対配置とcalc()関数を使用した方法：

必要に応じて中央に配置する要素の位置指定の属性を固定配置にしてから、 calc() 関数を使って要素の左余白と上余白の値を計算し、要素を中央に配置します。

.element {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}

1. Flexboxレイアウトを使用する

フレックスボックスレイアウトを使えば、要素のセンタリングをより柔軟に行えます。親要素のdisplayプロパティをflexに設定し、justify-contentとalign-itemsプロパティを使って要素を水平・垂直方向に中央寄せします。

.container {
display: flex;
justify-content: center;
align-items: center;
}

以上の3つの方法ではすべて中央揃えの効果が得られますが、実際のご要望やレイアウトの構成に応じてどの方法がより適切かは異なります。