divをセンタリングし、上下に配置していますか？

Question

私はdivを中心にしたいが、同時にコード内にtop: 100px;のようなものを使用できるようにする。これは可能ですか？私がposition: fixed;と言ったら、トップ/ボトムのスタイルは機能しますが、margin-left: autoとmargin-right: autoは無効になっています。一度に両方の機能を取得するにはどうすればよいですか？ありがとう！

Answer 1

これを使用する方法によって、最も簡単な方法は、固定位置の「目に見えない」ものと、中央に位置する内側の要素の2つの要素を使用することです。このような何か：

http://jsfiddle.net/CCqUn/

<div> 
    <p>Test</p> 
</div> 

div { 
    position:fixed; 
    top:100px; 
    width:100%; 
    height:0; /* In case of z-index issues; this element should be "hidden" */ 
} 
div p { 
    width:200px; 
    margin:0 auto; 
    background:#CCC; 
} 

Answer 2

私は、上部の座標ではなく、マージン/パディングと共に、包含要素（時間の99％）を使用することになります（これは、位置とサイズを持つ他の要素知られている）。以下をチェックアウト：

<div class="container"> 
    <div class="content"> 
     Some content in here..! 
    </div> 
</div> 

...その後、CSS：

.container 
{ 
    width: 100%; 
} 

.content 
{ 
    width: 200px; 
    background-color: ORANGE; 

    /* set it to the center of the container, plus move it down */ 
    /* using 100px for the top margin */ 
    margin: 100px auto 0px; 
} 

これは、autoに左右の余白を設定する下マージン0pxを残して、上マージン100pxになるだろう。

明らかに、要素の中心位置決めのために、0px auto余白の設定が最善だろう、しかし、あなたは要素を配置することがしたいと思いれる正確な座標を知っていれば、コンテナに対する、することができます以下も試してみてください（CSS）：

.container 
{ 
    width: 100%; 
    position: relative; 
} 

.content 
{ 
    width: 200px; 
    background-color: ORANGE; 

    /* exact coordinates, relative to the container (parent) */ 
    position: absolute; 
    top: 100px; 
    left: 100px; 
} 

Answer 3

http://jsfiddle.net/nb6zY/2/

だけではない '自動' で、動作する固定要素のマージンを設定します。

div { 
    width:100px; 
    position:fixed; 
    top:100px; 
    left:50%; 
    margin-left:-50px; 
} 

これだけ作品をあなたがセンタリングしたいのdivの幅を知っている場合：モーダルを作成するときに、私は多くの場合、以下のような技術を使用しています。トリックはdivの幅の負の '半分'に左端を設定しています。