CSSにおける絶対位置設定による中央揃えの実現方法は多数存在します。以下では、この機能を実現する4つの方法を紹介します。
1. 一般的なCSSにおける「絶対位置設定による中央配置」の適切な実装方法:
.conter{
width:600px;height:400px;
position:absolute;left:50%;top:50%;
margin-top:-200px;/*高度的一半*/
margin-left:-300px;/*宽度的一半*/
}
注意:この方法には明確な欠点があります。つまり、要素のサイズを事前に把握している必要があります。そうでなければ、`margin`の負値を正確に調整することはできません。この場合、通常、JSを用いて取得する必要があります。
2. CSS3の登場により、より優れた解決策が提供されました。すなわち、「margin」の代わりに「transform」を使用する方法です。`transform`における`translate`のパーセンテージ値は、その要素のサイズを基準としています。この方法を用いて、CSSによる絶対位置設定による中央配置を実現できます:
.conter{
width:600px;height:400px;
position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);/*50%为自身尺寸的一半*/
}
3. `margin: auto`:絶対位置設定を適用した要素を中央に配置する(上・下・左・右の各方向の位置を0に設定する;`margin: auto`)
.conter{
width:600px;height:400px;
position:absolute;left:0;top:0;right:0;bottom:0;
margin:auto;/*有了这个就自动居中了*/
}