CSS で垂直方向の中央揃えを実現する方法はたくさんありますが、各メソッドの欠点も明らかです
まず元のメソッドを見てください:
.parent{
幅:500px;
高さ:500px;
位置:relative ;
}
.child{
width:100px;
height:100px;
}
この種類 誰もがこの方法を知っているはずですが、それには致命的な欠陥があります:
子供の身長は知られている。しかし、よく考えてみると、位置決め後に調整する必要がある距離はちょうど子供の身長の半分です。
それでは、このようにして距離を 50% に置き換える方法はありますか?無視してください新しいメソッドはこちらです:
< /div>
.parent{
height:500px;
top:50%;
}
.child{
幅:100px;
height:100px;
margin-top:-50%;
}
新しいメソッドは、子の外側にラッパーのレイヤーを追加し、最初にラッパーを絶対配置してから、子を通る距離を調整します。ラッパーの高さは子によって引き伸ばされるため、
したがって、子に対して margin-top: -50% を設定することは、自身の高さの半分を上げることと同等です
現時点では、知る必要はありません垂直方向のセンタリングを実現するための子の高さ
テスト済み、IE5 でも実装可能、
IE のすべてのバージョンと互換性あり
(ブログを書くのは初めてなので、間違いがあればご指摘ください)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
