web-dev-qa-db-ja.com

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

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

width: 500px;

そして、私のchild要素は

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

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は要素をその右側に配置するため、コンテンツ全体が親の50%幅のポイントから左になります。

そして、vertical-anchorにも同じことが当てはまります。

では、CSSのみ（スクリプトなし）を使用すると、このようなことが可能になりますか？

ありがとう！

htmlcsspositionpositioningcss-position
40
kaboom1

要素を絶対に配置する必要がある場合（したがって、_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);は、ブロックの半分own幅をx軸に沿って（つまり、左に）引っ張ります。親の中央にあります。

これはクロスブラウザ互換ではない可能性が高いことに注意してください。古いブラウザでは何らかのフォールバックが必要になります。

49
John

この質問につまずいたので、div内のコンテンツを中央に配置する別の方法を追加したいと思います。

次のCSSプロパティを親divに設定する場合のように、CSS3表示モード「フレキシブルボックス」を使用する

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

そして、「少なくとも」次のプロパティを子divに設定します

position:relative;

ブラウザは、コンテンツを幅や高さの影響を受けずに自動的に親divの中央に配置します。これは特に、画像グリッドのようなものを開発する場合や、divの位置を計算する手間を省きたい場合に便利です。上記のdivの設定について気が変わったら、再計算してください。

私自身の仕事では、という名前のクラスを設定する傾向があります

.center-center

親divについて説明したプロパティを使用して、コンテンツを中央に配置する必要がある要素に追加します。

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

https://jsfiddle.net/f1Lfqrfs/

複数行のサポートについては、次のCSSプロパティを親DIVに追加（またはJSFでコメント解除）できます

flex-wrap: wrap;
2
Kay Angevare

これは、コンテナの中央にテキスト要素を中央に配置する1つの方法です（例としてヘッダーを使用します）

CSS：

.header {
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
}

中央のアンカーポイントによって中央に配置されます。

2
Melinda Chang

別の要素を追加することがオプションの場合、次のことを考慮してください。

（ 以下のコードをライブで表示 ）

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%）。

2
Sandy Gifford

_transform: translateX_をcalcとともに使用して、左上ではなく要素の中心ごとに水平方向に配置することで機能しました。 _transform: transformY_を使用して、垂直に同じトリックを使用できます。これは、あらゆるタイプの幅で動作します（サイズ変更を試してください）

スニペット：transform: translateX(calc(-50% + 223px));

ブラウザのサポート： https://caniuse.com/#feat=transforms2d 、 https://caniuse.com/#feat=calc

その他の例については、Codepen： https://codepen.io/manikantag/pen/KJpxmN

OffsetLeft/offsetTopなどに関する注意：_el.offsetLeft_は、CSS変換された要素に対して適切な値を与えられません。 el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft（ ここで述べたように ）のようなものが必要です。

フロー効果に関する注意：スペースを占有しないCSSの事柄 で説明されているように、変換は次の要素に影響しません変換によるオフセットを考慮せずに。これは意図した動作ではない場合があります。これは、幅/高さが固定されている場合、負のマージンを使用して修正できます（幅/高さが_%_を使用している場合は機能しません）

_.left-positioned {
  margin-left: 223px;
  background-color: lightcoral;
}

.center-positioned {
  transform: translateX(calc(-50% + 223px)); /*=====> actual solution */
  background-color: cyan;
}

.with-width {
  width: 343px;
  background-color: lightgreen;
}


/* styles not related to actual solution */

div {
  resize: both;
  overflow: auto;
}

.container {
  background-color: lightgray;
}

.ele {
  display: inline-block;
  height: 70px;
  text-align: center;
}_
_<div class="container">
  <div class="ele left-positioned">Reference element (left at 223px)</div> <br/>
  <div class="ele center-positioned">^<br/>Center positioned element (center at 223px)</div> <br/>
  <div class="ele center-positioned with-width">^<br/>Center positioned element with width (center at 223px)</div>
</div>_
0
manikanta

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";
}
0
Ali Bassam