css - javascriptを使用せずにdiv要素を中央および垂直に配置する方法

Question

垂直方向と水平方向の両方でdiv要素であるcssを使用して、中央に配置しようとしています。

私が見たすべての例は、ピクセル値のようなハードコードされた値を利用しています。

javascriptを使用せず、パーセンテージ値のみを使用してdiv要素を中央に配置することは可能でしょうか？

これが私のテストです：jsfiddle.net

score 2 · Accepted Answer

divのサイズを知る必要があります。（はい、divのサイズはFIXEDである必要があります）。

div { 
    width: 50px; 
    height: 50px; 
}

彼のdivは絶対的な位置にある必要があります：

div { 
    position: absolute; 
    width: 50px; 
    height: 50px; 
}

その後、上部を囲み、50％のままにする必要があります。

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
}

最後に、divの高さと幅の半分の値を参照して、上と左の両方に負のマージンを追加する必要があります。

div { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 50px; 
    height: 50px; 
    margin:-25px 0 0 -25px; 
}

テストしてください。
ご不明な点がございましたらお知らせください。

score 1 · Accepted Answer

これは、実際には:beforeセレクターを使用して実行できます（ブラウザーの互換性には疑問がありますが、実行できます）。

クリス・コイエによるこの素晴らしい記事をチェックして、それについてすべてを学んでください。彼はまた、それを試すためのjsfiddleリンクを提供しています。

2 に答える 2