divを中央に配置する方法はたくさんありますが、要約した内容を見てみましょう。最終的には、Lieziが一番下に配置されます。
1.マージンとポジショニングを使用する
/*父级*/
position:relative;
/*子级*/
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
詳細な説明：
マージンを自動的に調整するように設定してから、4つの側面のバランスをとってボックスの中心を実現するのと同じように、ポジショニングの上下左右を0に設定します。
2.テーブルセルを使用する
/*父级*/
display:table-cell;
text-align:center;
vertical-align: middle;
/*子级*/
display:inline-block
詳細な説明：
親ボックスをtable-cellに設定し（要素をセルのスタイルで表示できるようにします）、text-align：center（コンテンツを水平方向に中央揃え）; vertical-align：middle（コンテンツを垂直方向に中央揃え）に設定します。子ボックスは、コンテンツをテキスト形式にするためにインラインブロックに設定され、幅と高さも設定できます。このメソッドの親は、無効化の原因となる指定された高さと幅を設定する必要があります。
3.フレックスボックスを使用する
display: flex;
justify-content: center;
align-items: center;
詳細な説明：
フレキシブルボックスを使用する場合は、display：flexを親に設定する必要があります。
親要素に、horizontal justify-content：center;およびvertical align-items：center;配置を設定します。
4.ポジショニング+ディスプレイスメントを使用します
/*父级*/
position:ablative;
/*子级*/
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
詳細な説明：
ポジショニングを使用して子を右下方向に「排出」し、子の左上隅を親に対して中央に配置してから、変換（それ自体に対する変位）を使用して逆変位を行います。
5.ポジショニング+マージン（半値幅と高さ）を使用します
/*父级*/
position:ralatiive;
/*子级*/
height:50px;
width:50px;
position：absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
詳細な説明：
ポジショニングを使用してボックスを右下に押し込み、マージンを使用して押し戻します。
（原理は位置決め+変位の方法と同じです）