CSSはボックスモデルのセンタリングの問題を解決します

CSSは、ボックスモデルの水平方向のセンタリング、垂直方向のセンタリング、および水平方向と垂直方向のセンタリングの複数のメソッドを実装します

ボックスモデルの水平方向のセンタリングを実現するCSSメソッド

グローバルスタイル

.parent { 
color: #FFFFFF; 
height: 200px; 
width: 200px; 
margin: 0 auto;
background-color: #000000;
 } 
.child { 
width: 50px;
height: 50px;
background-color: #26f12d;
 }

最初のタイプ：margin + width

この方法は、すでに幅がわかっているボックスに適しており、実装は比較的簡単です。

<div class="parent"> 
<div class="child"></div> </div> 
.child { 
width: 50px;
margin: 0 auto; 
}

2番目のタイプ：text-align + inline-block

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> 
<div class="child"></div> </div> 

.parent { 
text-align:center; 
} 
.child { 
display: inline-block;
 }

3番目のタイプ：float + position

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.between { 
position: relative; 
left: 50%; 
float: left; 
} 
.child {
position: relative; 
right: 50%; }

第4：

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div>
 .parent {
 position: relative; 
} 
.between { 
position: absolute; 
left:50%;
 } 
.child { 
position: relative; 
right: 50%; 
}

5番目：フレックス

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> <div class="child"></div> </div> 
.parent { 
display:-webkit-box; 
-webkit-box-pack: center; 
-webkit-box-orient: horizontal; 
}

6番目：フィットコンテンツ

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.between { 
width: -webkit-fit-content; 
margin: 0 auto; 
}

ボックスモデルの垂直方向のセンタリングを実現するCSSメソッド

最初のタイプ：位置

この方法は、幅がすでにわかっているボックスに適しています

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
width: 200px; 
height: 200px; 
} 
.child { 
position: absolute; 
margin:75px 0; 
}

2番目のタイプ：位置+変換

この方法は、幅がすでにわかっているボックスに適しています

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
width: 200px; 
height: 200px; 
} 
.child { 
position: absolute; 
top: 50%;
transform: translate(0%, -50%); 
}

3番目のタイプ：フレックスレイアウト

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
display: flex;
align-items: center; 
}

4番目：テーブルセルレイアウト

この方法は、さまざまなシナリオに適しています（幅は固定されていません）

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.parent { 
display: table; 
} 
.between { 
display: table-cell;
vertical-align: middle; 
}

ボックスモデルの水平および垂直のセンタリング方法を実現するCSS

最初：

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
left: 50%; 
top: 50%; 
transform:translate(-50%,-50%); 
}

2番目のタイプ：

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
} 
.child { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0;
margin: auto; 
}

3番目のタイプ：

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top:
-25px; /* 自身 height 的一半 */ margin-left: -25px; /* 自身 width 的一半 */ 
}