Html 按中心点定位，而不是按左上角点定位

是否可以告诉代码按元素的中心点定位，而不是按左上角的点定位？ 如果我的父元素已

width: 500px;

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

而我的孩子元素

width: 500px;

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

一个假设，根据<代码> 50% < /代码>定位，子元素将位于父的中间，在每个边上留下<代码> 150 px自由空间。然而，事实并非如此，因为它是子对象的左上角点，占据父对象宽度的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;

类似地，

水平锚定：right

将元素定位在其右侧，因此整个内容将从其父元素的

50%

宽度点向左

同样的情况也适用于

垂直锚

，你明白了

那么，这样的事情是否可以只使用CSS（不使用脚本）

---

谢谢！

左：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";
}

---

如果元素必须绝对定位（因此，

margin:0auto；

不用于居中），并且脚本编写是不可能的，那么可以通过CSS3转换实现这一点

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

请参阅以下示例。重要部分：

左：50%；

将块推到其父块的一半（因此，正如您所提到的，其左侧位于50%标记上）。

变换：平移（-50%，0）；

将块沿x轴拉回到其自身宽度的一半（即向左），这将使其正好位于父对象的中心

---

注意，这不可能是跨浏览器兼容的，并且仍然需要对旧浏览器进行某种排序。

< P>如果添加另一个元素是一个选项，请考虑以下内容：

（）

HTML:

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

/* 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%，并获取其父维度（即

宽度：100%

）。

偶然发现了这个问题，我想添加另一种方法来在div中集中内容

通过使用CSS3显示模式“flexible box”，如将以下CSS属性设置为父div

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

以及“至少”为子div设置以下属性

position:relative;

浏览器将自动将父div中的内容居中，不受其宽度或高度的影响，这在您正在开发图像网格之类的内容或只是想省去计算div位置的麻烦时特别有用，然后在您改变对所述div设置的想法时必须重新计算它

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

.center-center

使用我为父div描述的属性，然后将其添加到需要其内容居中的任何元素中

为了支持这一解释，我创建了一个JSFIDLE，您可以随意单击红色方块来查看实际的位置

对于多行支持，您可以向父DIV添加（或在JSF中取消注释）以下CSS属性

flex-wrap: wrap;

---

这是一种在容器中间对文本元素进行中心化的方法（使用标题为

） CSS:

---

它通过中间的锚点居中。

我通过使用

transform:translateX

和

calc

来实现它的工作，通过元素中心而不是左上角进行水平定位。同样的技巧也可以用于垂直使用

transform:transformY

。这将适用于任何类型的宽度（尝试调整大小）

代码片段：

transform:translateX（计算（-50%+223px））；

浏览器支持：

有关更多示例，请参阅Codepen：

关于offsetLeft/offsetLeft等的注意事项：

el.offsetLeft

不会为CSS转换的元素提供正确的值。您需要类似于

el.getBoundingClientRect（）.left-el.offsetLeft-el.parentNode.offsetLeft

（）

关于流效应的注意事项：如中所述，在不考虑变换引起的偏移量的情况下，变换不会影响以下元素。有时这可能不是预期的行为。如果宽度/高度固定，则可以使用负边距固定（如果宽度/高度使用

%

，则不起作用）

。左定位{
左边距：223px；
背景颜色：浅珊瑚；
}
.中心定位{
转换：translateX（计算（-50%+223px））；/*=>实际解决方案*/
背景色：青色；
}
.宽{
宽度：343px；
背景颜色：浅绿色；
}
/*与实际解决方案无关的样式*/
div{
调整大小：两者；
溢出：自动；
}
.集装箱{
背景颜色：浅灰色；
}
埃莱先生{
显示：内联块；
高度：70像素；
文本对齐：居中；
}

参考元素（位于223px处左侧）

^
中心定位元件（中心位于223像素处）

^
中心采购订单