CSSを使用して独自の位置プロパティ上に中心要素を配置する

Question

可能であれば、CSSを使用してdiv要素（または他のhtml要素）をCSSの上と左に配置したいと考えています。デフォルトでは、絶対配置された要素は左上隅をtopプロパティとleftプロパティに揃えます。

は私が何を最良の選択肢を知っていると思います：灰色のボックスは、相対位置の容器で、赤い点は、ページ上の青の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>

Answer 1

はあなたが唯一のマイナスパーセント値を使用するにはtransform: translate(-50%, -50%)

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); 
 
    transform: translate(-50%, -50%); 
 
}

<div id="main-box" class="container"> 
 
    <div id="center-on-pos"></div> 
 
</div>

Answer 2

を使用することができます...スニペットを参照してください、あなたはとても、余分なコンテナの子ANを必要とします親は同じサイズです。

body { 
 
    padding: 85px; 
 
} 
 
.container { 
 
    background-color: rgba(0, 0, 0, .2); 
 
    width: 400px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
.container > div { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    } 
 
.abst>div { 
 
    margin:-50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: rgba(255, 0, 0, .5); 
 
}

<div id="main-box" class="container"> 
 
    <div class="abst"><div id="center-on-pos"></div></div> 
 
</div>