左上の点ではなく、中心点による位置

Question

左上の点ではなく、要素の中心点によってコードを配置することは可能ですか？ 私親要素が

width: 500px; 

を持っており、私の子要素は

/*some width, for this example let's say it's 200px*/ 
position: absolute; 
left: 50%; 

1は50%の位置に基づいて、子要素が親の真ん中になりますことを前提としていますされている場合各側に空き領域の150pxを残します。しかし、それは親の幅の50%に行く子供の左上の点であるため、200pxの子どもの幅全体​​がそこから右に行くので、左に唯一の空きスペースの250pxが残っています右は50pxです。

私の質問は、実現する方法中心配置？

私は、このソリューションが見つかりました：

position: absolute; 
width: 200px; 
left: 50%; 
margin-left: -100px; 

をいますが、各要素の幅のためにそれを手動で編集する必要があるため、私はそれを好きではない - 私は、グローバルに働く何かをしたいと思います。

（たとえば、Adobe After Effectsで作業する場合、オブジェクトの位置を設定し、その位置に配置されるオブジェクトの特定のアンカーポイントを設定できます。キャンバスが1280pxワイドの場合、あなたがオブジェクトの中心を選択640pxへのオブジェクトとは、オブジェクト全体が1280px広いキャンバスの中央に配置されますあなたのアンカーポイントであるように）

私はCSSでこのようなものを想像：。

position: absolute; 
left: 50%; 
horizontal-anchor: center; 

同様に、horizontal-anchor: rightは、要素b yその右辺は、コンテンツ全体が親の50%の幅の点から左になります。

vertical-anchorについても同じことが言えます。

だから、のみのCSS（スクリプトなし）を使用すると、このようなことがありますか？

ありがとうございます！

Answer 1

要素は絶対に（そう、margin: 0 auto;がセンタリングのために役に立たない）に配置されなければならない、とスクリプトは問題外である場合CSS3の変換でこれを実現できます。

.centered-block { 
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute; 
} 

この例では、fiddleを参照してください。重要な部分：left: 50%;は、その親を横切ってブロックをプッシュします（言い換えれば、その左側は50％のマークです）。 transform: translate(-50%, 0);は、ブロックの半分を引っ張って、自身のの幅をx軸に沿って（つまり左に）戻します。これにより、親の中央に右に配置されます。

これはブラウザ間での互換性がない可能性があり、古いブラウザでは何らかの種類のフォールバックが必要になることに注意してください。別の要素を追加するオプションがある場合は

Answer 2

left：50％はこのdivの重心を左に50％中心にしません。これは、左の境界と親要素の左の境界の間の距離です。したがって、基本的に計算を行う必要があります。

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ] 

left = left/2 

ですから、Javascriptの機能を行うことができます...

function Position(var parentWidth, var childWith, var borderWidth) 
{ 
     //Example parentWidth = 400, childWidth = 200, borderWidth = 1 
     var left = (parentWidth - (childWidth + borderWidth)); 
     left = left/2; 
     document.getElementById("myDiv").style.left= left+"px"; 
} 

Answer 3

、次の点を考慮し

（View the following code live here）

HTML：

<div class="anchor" id="el1"> 
    <div class="object"> 
    </div> 
</div> 
<div class="anchor" id="el2"> 
    <div class="object"> 
    </div> 
</div> 

CSS：

/* CSS for all objects */ 

div.object 
{ 
    width:    100%; 
    height:    100%; 
    position:   absolute; 
    left:    -50%; 
    top:     -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */ 
} 

div.anchor 
{ 
    position:   absolute; /* (or relative, never static) */ 
} 


/* CSS for specific objects */ 

div#el1 
{ 
    /* any positioning and dimensioning properties for element 1 should go here */ 
    left:    100px; 
    top:     300px; 
    width:    200px; 
    height:    200px; 
} 

div#el2 
{ 
    /* any positioning and dimensioning properties for element 2 should go here */ 
    left:    400px; 
    top:     500px; 
    width:    100px; 
    height:    100px; 
} 

div#el1 > div.object 
{ 
    /* all other properties for element 1 should go here */ 
    background-color: purple; 
} 

div#el2 > div.object 
{ 
    /* all other properties for element 2 should go here */ 
    background-color: orange; 
} 

基本的には、要素の位置、幅、高さを定義するオブジェクトを1つ設定し、内部に別のオブジェクトを配置して50％オフセットし、その親の寸法（つまりwidth: 100%）を取得します。

Answer 4

この質問は間違っていましたが、div内にコンテンツを配置する別の方法を追加したいと思います。親のdiv

display: flex; 
position: relative; 
align-items: center; 
justify-content:center; 

に次のCSSプロパティの設定のように、CSS3表示モード「柔軟ボックス」を使用し、「少なくとも」子のdiv

position:relative; 

に次のプロパティを設定することにより

ブラウザは自動的に親divの内容を幅や高さの影響を受けずに中央に配置します。これは、画像グリッドのようなものを開発しているときや、div位置を計算するだけのときに便利です次にhあなたがそのdivの設定についてあなたの心を変えたときにそれを再計算することをお勧めします。私自身の仕事で

、私はセットアップするために、私は、親のdivのために説明した施設の中でも

.center-center 

という名前のクラスを、そしてちょうど私がその内容を中心に必要があるのどんな要素に追加する傾向があります。

この説明をサポートするためにJSFiddleを作成しました。赤い四角をクリックして、実際の位置を確認してください。マルチラインのサポートのために

https://jsfiddle.net/f1Lfqrfs/

、あなたは追加（またはJSFでのコメントを解除）することができ、親DIV

flex-wrap: wrap;