通过中心点，而不是左上角点位置(Position by center point, rather t

是否有可能通过一个元素的中心点告诉代码位置，而不是由左上点？ 如果我的父元素具有

width: 500px;

和我的子元素具有

/*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（无脚本）？

谢谢！

Answer 1:

如果元素必须绝对定位（因此， margin: 0 auto;是没有用的定心）和脚本是出了问题，你可以用CSS3转换实现这一目标。

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

看到这个小提琴的一些例子。 最重要的部分： left: 50%; 推块横跨半个其父（因此其左侧为50％标记上，因为你所提到的）。 transform: translate(-50%, 0); 拉块半它自己的宽度沿x轴回（即左侧），这将它放置在右边的父的中心。

请注意，这是不太可能是跨浏览器兼容，仍然需要某种旧的浏览器的回落。

Answer 2:

如果添加其他元素是一种选择，考虑以下因素：

（ 查看下面的代码住在这里 ）

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;
}

从本质上讲就是我们正在做的是建立一个对象来定义元素的位置，宽度和高度，然后把它里面另外一个，得到了50％的偏移，并得到它的父维度（即width: 100% 。

Answer 3:

偶然发现了这个问题，我想补充另一种方式来一个div内的中心内容。

通过使用CSS3显示模式“柔性框”，如下面的CSS属性设置到母体DIV

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

和“至少”设置以下属性，给孩子的div

position:relative;

该浏览器将自动居中父格中的内容，通过他们的宽度或高度的影响，这尤其就派上用场了，当你正在开发类似的图像网格或只是想删除计算的div位置的麻烦，那么不必重新计算它，当你改变了主意说div的设置。

在我自己的工作，我倾向于建立一个名为类

.center-center

随着我父DIV中描述的属性，然后只需将其添加到任何元素，而我需要它的内容居中。

，我创建了一个的jsfiddle支持这一解释，随意点击红色方块在行动中看到的定位。

https://jsfiddle.net/f1Lfqrfs/

对于多线支撑，可以在下面的CSS属性添加（或JSF取消注释）父DIV

flex-wrap: wrap;

Answer 4:

这里的居中在容器的中间的文本元素的一种方法（使用的报头作为例子

CSS：

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

IT中心由中间锚点。

Answer 5:

左：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 6:

我把它用工作transform: translateX与calc通过元素中心而不是左上角horizo​​nally定位。 同样的伎俩，可用于垂直使用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> 

文章来源: Position by center point, rather than top-left point