垂直配置要素の一般的なトリックは、次の CSS を使用することです。
.item {
position:absolute;
top:50%;
margin-top:-8px; /* half of height */
height: 16px;
}
Chrome のメトリック ビューで見ると、次のようになります。
ただし、要素の上にマウスを移動しても視覚的な余白は表示されません。つまり、余白は境界線の「外側」にあり、視覚化できます。ただし、負のマージンは表示されません。負のマージンはどのような外観で、何が違うのでしょうか?
なぜmargin-top:-8px 同じではない margin-bottom:8px?
margin-top < 0では、マイナス マージンはどのように機能し、その背後にある直感は何でしょうか。アイテムを「押し上げる」にはどうすればよいでしょうか。
ベストアンサー1
負のマージンはCSSで有効であり、その（準拠した）動作を理解するには主にボックスモデルマージンの崩壊などです。特定のシナリオはより複雑ですが、仕様を研究することで多くの一般的な間違いを回避できます。
たとえば、サンプルコードのレンダリングは、CSS仕様に従って行われます。絶対配置された非置換要素の高さと余白を計算する。
グラフィックで表現するとしたら、おそらく次のようになります (縮尺は正確ではありません)。
のマージンボックス8px上部で失われますが、これは影響しませんコンテンツとパディングボックス要素は絶対配置されているため、要素を 8 ピクセル上に移動してもレイアウトにそれ以上の乱れは発生しません。ただし、静的なインフロー コンテンツの場合は必ずしもそうとは限りません。
ボーナス：
スペックを読むことがの素晴らしい（このような記事)? 要素を垂直方向に中央揃えしようとしているのがわかりますが、margin-top:-8px;ではなく を設定する必要があるのはなぜですかmargin-top:-50%;?
さて、CSSの垂直方向の中央揃えは本来よりも難しい. 設定しても上または底マージンを％で表すと、値は次のように計算されます。パーセンテージは常に幅包含ブロックのこれはむしろよくある落とし穴であり、この奇妙な点はw3のドキュメント以外ではほとんど説明されていない。