CSS では、margin: 0 auto; を使用して水平方向の中央揃えを実現できますが、margin: auto 0 では垂直方向の中央揃えを実現できません。
ここでの主な理由は、親コントロール、つまりコントロール自体が正しく配置されていないことです。コードを直接見ると、まず親コントロールに相対レイアウトを使用し、次に子コントロールに絶対レイアウトを使用し、top 属性とbottom 属性を margin: auto 0; と組み合わせて使用して、効果。
.container-vertical { 位置: 相対; 幅: 100%; 高さ: 200px; } .container-vertical-item { 位置: 絶対; 高さ: 80px;整列: 中央; 背景: 黄色; 上: 0; 余白: 0 0;}垂直方向中央揃え.png
水平方向と垂直方向の中央揃え5.2 の経験では、子コントロールの left、right、top、bottom プロパティを 0 に設定し、4 方向すべてに margin: auto; の自動マージンを設定してみることができます。このような効果が得られます。注意が必要なサブコントロールには、display: block 属性が必要です。
コードを見てください
.container-horization-vertical { 位置: 相対; 幅: 100%; 高さ: 200px; } .container-horization-vertical-item { 位置: 絶対; 80ピクセル; 行の高さ: 80ピクセル; 上: 0; 0; 下: 0; 右: 0; マージン: 自動;}概要: このソリューションは、それほど複雑ではないページ レイアウトを解決する場合には依然として非常に優れており、あらゆるインターフェイスとほぼすべてのブラウザーに適応できます。ただし、非常に複雑なページの場合は、他のソリューションが必要になる場合がありますが、このアイデアからインスピレーションを得ることもできます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。