Question

是否可以通过元素的中心点而不是左上角来告诉代码定位？如果我的父元素有

width: 500px;

我的子元素

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

可以假设基于50%定位，子元素将位于父元素的中间，每侧留下150px个可用空间。但是，它不是，因为它是孩子左上角的父级宽度的50%，因此整个孩子的宽度200px从那里向右移动，留下{ {1}}左侧的可用空间，右侧只有250px。

所以，我的问题是，如何实现中心定位？

我找到了这个解决方案：

50px

但我不喜欢它，因为你需要为每个元素的宽度手动编辑它 - 我想要一些全局工作的东西。

（例如，当我在Adobe After Effects中工作时，我可以为对象设置位置，然后设置将放置到该位置的该对象的特定锚点。如果画布为position: absolute; width: 200px; left: 50%; margin-left: -100px;宽，将对象定位到1280px，然后选择对象的中心作为锚点，然后整个对象将在640px宽画布中居中。）

我会在CSS中想象这样的事情：

1280px

类似地，position: absolute; left: 50%; horizontal-anchor: center;会将元素放在右侧，因此整个内容将从其父级horizontal-anchor: right宽度的点开始向左。

而且，同样适用于50%，你得到它。

那么，使用仅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

如果添加其他元素是一个选项，请考虑以下事项：

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

基本上我们正在做的是设置一个对象来定义元素的位置，宽度和高度，然后在其中放置另一个偏移50％的对象，并获得它的父维度（即{{ 1}}）。

Answer 3

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

使用CSS3显示模式＆＃39;灵活框＆＃39;，如将以下CSS属性设置为父div

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

至少＆＃39;将以下属性设置为子div

position:relative;

浏览器会自动将内容放在父div中，不受其宽度或高度的影响，当您开发类似图像网格或只是想消除计算div的麻烦时，这尤其会派上用场当你改变主意关于所述div的设置时，必须重新计算它。

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

的类

.center-center

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

我已经创建了一个支持这种解释的JSFiddle，可以随意点击红色方块来查看实际定位。

https://jsfiddle.net/f1Lfqrfs/

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

flex-wrap: wrap;

Answer 4

这是将文本元素居中放置在容器中间的一种方法（以标题为例

CSS：

from openpyxl.worksheet.datavalidation import DataValidation
wb = Workbook()

ws = wb.create_sheet('New Sheet')

for number in range(1,100): #Generates 99 "ip" address in the Column A;
    ws['A{}'.format(number)].value= "192.168.1.{}".format(number)

data_val = DataValidation(type="list",formula1='=$A:$A') #You can change =$A:$A with a smaller range like =A1:A9
ws.add_data_validation(data_val)

data_val.add(ws["B1"]) #If you go to the cell B1 you will find a drop down list with all the values from the column A

wb.save('Test.xlsx')

它以中间锚点为中心。

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与transform: transformY一起使用来按元素中心而不是左上角进行水平定位来使其工作。可以使用transform: translateX(calc(-50% + 223px));将相同的技巧用于垂直。这将适用于任何（尝试调整大小）

类型的宽度

摘要：el.offsetLeft

浏览器支持：https://caniuse.com/#feat=transforms2d，https://caniuse.com/#feat=calc

Codepen中的更多示例：https://codepen.io/manikantag/pen/KJpxmN

offsetLeft / offsetTop等的注意事项：el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft对于CSS转换后的元素将没有适当的值。您需要类似% （as mentioned here）

关于流效应的注意事项：如CSS Things That Don’t Occupy Space中所述，在不考虑由变换引起的偏移的情况下，变换不会影响以下元素。有时这可能不是预期的行为。如果宽度/高度固定，则可以使用负边距来解决此问题（如果宽度/高度使用.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>

SUMPRODUCT

Answer 7

您可以使用 transform property 和 translate function 移动一个元素，使其中心与指针位于同一位置，如下所示：

transform: translate(-50%, -50%);

相当于：

transform: translateX(-50%) translateY(-50%);

这会将元素沿 X 轴和 Y 轴向后移动其长度的一半，使其中心位于您放置它的指针上方。

中心示例

例如，如果您想将一个元素放置在其父元素的中心，您首先将指针放置在中心，如下所示：

left: 50%
top: 50%

然后添加转换以将元素的中心移动到指针上，如下所示：

left: 50%
top: 50%
transform: translate(-50%, -50%);

<块引用>

感谢 Joe Rhoney, 2019 在上一个答案的评论中建议使用 transform。

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

7 个答案:

中心示例