親要素と中央の幅と高さの子要素は不明です
1.垂直整列中央処理センター
<style>
.box {
width: 200px;
height: 400px;
background: yellow;
text-align: center;
}
.box .child {
width: 100px;
height: 100px;
background: orange;
display: inline-block;
vertical-align: middle;
}
.box .flag {
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
</style>
<body>
<div class="box">
<span class="flag"></span>
<img src="https://images2015.cnblogs.com/blog/315302/201704/315302-20170417105850790-1814593961.png"
class="child" />
</div>
</body>分析的思考：
- 100％のスパンの高さは、彼のベースラインが下マージンであるかを決定します。親要素のベースラインは、下マージンです。
- 真ん中の設定スパン。親エレメント+ 0.5×高さ合わせのスパンのベースライン横中心。この場合、親要素のベースラインに結果ページには、スパンの中央に移動し、移動を余儀なくさ - 位置の0.5倍の高さを。
- 0.5倍の高さの位置合わせ距離 - ベースライン画像とスパンボトムラインように、画像のデフォルトの親要素がベースラインと整列される左。画像セットの中央の左側に、+ 0.5×高さ横中心線からの画像は、親要素のベースラインと整列されます。
- この場合、2つの要素が垂直方向に整列されるように、中心線と位置合わせされます。
次のように具体的な方法があります
2.フレックス
<style>
.box {
width: 300px;
height: 300px;
background: orange;
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 100px;
height: 100px;
display: inline-block;
}
</style>
3.位置変換します+
<style>
.box {
width: 300px;
height: 300px;
background: orange;
position: relative;
}
.child {
position: absolute;
display: block;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>アイデア：
- 親要素は、相対的な位置に配置されました。サブ要素は、絶対位置を設定します。
- 左と上の子要素を50％に設定され、割合は親要素の幅と高さを基準にしています。このとき、近い親要素の縦軸と横軸の左と上のサブ要素は、実際にセンタリングされていません。
- アップと左オフセット製品に変換します。なお、負の値は上方及び左
4.マージン+変換
.box {
width: 300px;
height: 300px;
background: orange;
overflow: hidden;
}
.child {
display: block;
width: 100px;
height: 100px;
margin: 0 auto;
margin-top: 50%;
transform: translateY(-50%);
}アイデア：
- マージントップは、高さの点でハウジングブロック（親要素）に対するその高さのパーセンテージに設定されています。このとき、サブエレメントの上部の中心には位置合わせが、全体されません。
- その幅と高さを変換オフセット。