按中心定位HTML元素

Question

根据中心句柄定位HTML元素的正确方法是什么？

在这个例子中：

XXXXXXXXX 
     | 
     | 
    123px 

假设元件应位置的绝对位置left: 123px;但文字应在该点为中心，在它不能启动。元素文本是动态的，所以我没有办法在其上设置静态负数margin-left。

有没有一种纯CSS的方式来实现这一目标？在计算width/2之后，测量offsetWidth然后设置left的JS方式由于各种限制而不会在我的情况下起作用。

Answer 1

这是相当容易实现这一点，有几种方法去做吧。由于您没有为您的示例发布任何HTML构造，因此我只会补充一些。

诀窍是具有其具有内联块的父元素的期望偏移（123px）和元件内部你必须与-50％的左边界另一个内联区元素。相对位置，你会有你正在寻找的效果。

#container { 
 
    position: relative; 
 
} 
 
#line { 
 
    width: 100px; 
 
    height: 100px; 
 
    left: 123px; 
 
    position: absolute; 
 
    border-left: 1px solid red; 
 
} 
 
#text { 
 
    left: 123px; 
 
    top: 50px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
#text p { 
 
    position: relative; 
 
    background: green; 
 
    margin-left: -50%; 
 
    display: inline-block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
<div id="line"> 
 
&lt;-- 123px 
 
</div> 
 
<div id="text"> 
 
<p> 
 
This is some dynamic text<br>the div has no absolute set width. 
 
</p> 
 
</div></div>

有提到其他的方式，可能取决于你的总体布局/ HTML结构。我肯定会看一下flex-box属性，这里也可能适用。

如果你想玩它，这里是一个fiddle。

Answer 2

一些不同的方式用CSS来做到这一点：

如果你的元素是块：

.element{ 
    width: 200px; /* Full width */ 
    left: 50%; 
    margin-left: -100px; /* Half width */ 
    position: absolute; 
    display: block; 
} 

，或者，如果你使用CSS3：

.element{ 
    width: 200px; /* Full width */ 
    left: calc(50% - 100px); 
    position: absolute; 
    display: block; 
} 

你也可以有一个非绝对的方法，但是的父元素位置s HOULD相：

.element-parent{ 
    position: relative; 
} 

.element-parent .element{ 
    margin: 0 auto; 
} 

如果使用面向文本的元素（inline-block的），这一点也适用IE 7+：

.element-parent{ 
    text-align: center; 
} 

.element-parent .element{ 
    display: inline-block; 
} 

Answer 3

一个posibility是设置变换平移X -50％

p { 
 
    position: relative; 
 
    display: inline-block; 
 
     left: 100px; 
 
    transform: translateX(-50%); 
 
}

<p>ONE</p> 
 
<br> 
 
<p>TWO, LONGER</p> 
 
<br> 
 
<p>THREE, the longest</p>