私のコードは次のとおりです。
<div id="bigDiv">
<div id="smallDiv">DD</div>
</div>
私のCSSは次のとおりです。
#bigDiv {
border: 1px solid red;
height: 300px;
width: 300px;
vertical-align: middle;
}
#smallDiv {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 0 auto;
}
小さな div を大きな div 内で垂直方向および水平方向に中央に配置したい。横は効きますが、縦は効きません。
これを読んでください：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
読むのが面倒な場合は、次のようにします。
#bigDiv {
position: relative; /* Needed for position: absolute to be related to this element and not body */
border: 1px solid red;
height: 300px;
width: 300px;
vertical-align: middle;
}
もう一方を次のように変更します。
#smallDiv {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 1px solid black;
height: 100px;
width: 100px;
}
更新された jsfiddle は次のとおりです: http://jsfiddle.net/4Gjxk/1/
これは、最小限の CSS で最も簡単なソリューションだと思います。100 / 300 = ~.33 なので、次のように 33% のマージンを使用できます。
#bigDiv {
border: 1px solid red;
height: 300px;
width: 300px;
}
#smallDiv {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 33%;
}
更新された jsFiddleは次のとおりです。
ボックスの正確なサイズを知らずにそれを行う必要がある場合（ボックスが変更される可能性がある場合）、これは少しハッキーな方法です：http: //jsfiddle.net/gXbqm/
#bigDiv {
border: 1px solid red;
height: 300px;
width: 300px;
vertical-align: middle;
display:table-cell
}
#smallDiv {
border: 1px solid black;
height: 100px;
width: 100px;
margin: 0 auto;
vertical-align:center;
}
ただし、これらのdivが常に100x100および300x300になることがわかっている場合は、Jonathan.coneのソリューションの方がクリーンです。
次のようにする必要があります。
#smallDiv{
position:absolute;//? relative?
top:45%;
left:45%;
}
それはほぼ正しいはずですが、誰かがより良い方法を思いつくと確信しています。明らかに、ピクセルを実行することもできるので、top:100px;left:100px;おそらくあなたの場合でもうまくいくでしょう:)。
絶対配置で試してください。要素を中央に配置するには、要素の幅を知る必要があります。
#bigDiv {
border: 1px solid red;
height: 300px;
position: relative;
vertical-align: middle;
width: 300px;
}
#smallDiv {
border: 1px solid black;
height: 100px;
left: 50%;
margin: -50px auto 0 -50px;
position: absolute;
top: 50%;
width: 100px;
}
これを #smallDiv に追加します。
margin-top: 100px;