可能であれば、CSSを使用してdiv要素(または他のhtml要素)をCSSの上と左に配置したいと考えています。デフォルトでは、絶対配置された要素は左上隅をtopプロパティとleftプロパティに揃えます。CSSを使用して独自の位置プロパティ上に中心要素を配置する
は私が何を最良の選択肢を知っていると思います:灰色のボックスは、相対位置の容器で、赤い点は、ページ上の青のdivのCSSの位置(top: 0; left:0;
)ここで、以下の図を参照してください。下のページのサーモン色のdivのように、それ自身の位置に青いdivを中心に置くことになります。 可能であれば、ピクセルではなくパーセンテージでポジションを希望します。
これまでのところ、私はJavaScriptソリューションを試してみました。それは親の子供のwidth
を計算してから、そのパーセントの半分をleft
の位置から差し引いて計算します。その後、height
とトップポジションについても同様の処理を行います。
//put elements in variables
var container = document.getElementById('main-box');
var div = document.getElementById('center-on-pos');
//get top and left in div position percentages relative to container
var div_top = (div.offsetTop/container.offsetHeight) * 100;
var div_left = (div.offsetLeft/container.offsetWidth) * 100;
//calculate how much we need to shift
var offset_top_pos = ((div.offsetWidth/container.offsetWidth) * 100)/2;
var offset_left_pos = ((div.offsetHeight/container.offsetHeight) * 100)/2;
//shift div
div.style.top = (div_top - offset_top_pos) + '%';
div.style.left = (div_left - offset_left_pos) + '%';
body{ padding:85px; }
.container{
background-color:rgba(0,0,0,.2);
width:500px;
height:500px;
position:relative;
}
.container > div{
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
background-color:rgba(255,0,0,.5);
}
<div id="main-box" class="container">
<div id="center-on-pos"></div>
</div>
くそー、それは非常に高速でした! :P私は同じだったhttps://jsfiddle.net/y1cbzvk2/1/ –
パーフェクト! @Nenad Vracar、ただ好奇心が強い、と思う方法はありますが、CSS3なしで可能ですか? – tnschmidt
@tnschmidt既知のサイズであれば、負のマージンで行います:) 'margin-top:-50px; margin-left:-50px'または負のcoordonates:' left:-50px; top:-50px; ' –