記事のディレクトリ
1つは、divが水平方向と垂直方向の中央に配置されていることです。
1.flex
フレックスの詳細な紹介と適用を見ることができます：
フレックス（フレキシブルレイアウト）は5つの一般的なレイアウトを実現します
<div class="box">
<div class="context"></div>
</div>
.box{
width: 300px;
height: 300px;
background-color: #ccc;
display: flex;
justify-content: center;//水平居中
align-items: center;//垂直居中
}
.box .context{
width: 100px;
height: 100px;
background-color: blue;
}
2.位置（要素の幅と高さは既知です）
- 親要素は次のように設定されます。position：relative;
- 子要素は次のように設定されます。position：absolute;
- 左の子要素：50％;上：50％;（左と上のパーセンテージは親要素に基づいています）
- 次に、負のマージンを持つ子要素の幅と高さの半分の距離を達成できます。
<div class="box">
<div class="context"></div>
</div>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .context{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
3.位置変換（要素の幅と高さが不明）
マージンを置き換えるだけです：-50px 0 0 -50px;上記の例では次のように置き換えます
：transform：translate（-50％、-50％）;
（変換のパーセンテージはそれ自体に基づいています）
<div class="box">
<div class="context"></div>
</div>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .context{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
4.位置（要素の既知の幅）maigin：auto
- 位置：絶対;
- 上：0;
- 下：0;
- 左：0;
- 右：0;
- マージン：自動;
<div class="box">
<div class="context"></div>
</div>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .context{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
5.テーブルセル
親要素のdisplay：table-cellを設定し、vertical-align：middle
を設定してから、子要素のmargin-leftとmargin-rightをautoに設定します。
<div class="box">
<div class="context"></div>
</div>
.box{
width: 500px;
height: 500px;
background: gray;
display: table-cell;
vertical-align: middle;
}
.box .context{
width: 200px;
height: 200px;
background: blue;
margin-left: auto;
margin-right: auto;
}
次に、テキストは垂直方向の中央に配置されます（1行のテキスト、複数行のテキスト）
このセクションでは、垂直方向の中央揃えと水平方向の中央揃えの設定を紹介します。text-align：center;
1.line-heightとvertical-alignを使用します
<div class="word-vertically-center1">
<div>
<span>测试文字测试文字</span>
</div>
<div>
<span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
</div>
</div>
.word-vertically-center1 div {
float: left;
width: 200px;
height: 200px;
margin: 10px;
border: 1px solid #000;
line-height: 200px;
}
.word-vertically-center1 span {
display: inline-block;
vertical-align: middle;
line-height: 22px;
}
2.利用表示：テーブルセル
<div class="word-vertically-center2">
<div>
<span>测试文字测试文字</span>
</div>
<div>
<span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
</div>
</div>
.word-vertically-center2 div {
display: table-cell;
width: 200px;
height:150px;
border:1px solid blue;
vertical-align: middle;
}
3.フレックスレイアウトのalign-items：center;を使用します。
<div class="word-vertically-center3">
<div>
<span>测试文字测试文字</span>
</div>
<div>
<span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
</div>
</div>
.word-vertically-center3 div{
float: left;
width: 200px;
height:150px;
border: 1px solid #000;
display: flex;
align-items:center;
}
参照：https：//blog.csdn.net/qq_39903567/article/details/114951168
この記事へのリンク：https：//blog.csdn.net/qq_39903567/article/details/115263277