Html 相对于父容器宽度的水平居中文本？

我正试图将一些文本水平居中放置在div中

CSS:

HTML:

左左
标题
正确的
标题-这一个是真正的中心。

但是，考虑到

#colLeft

占用的空间，文本“Title”似乎居中，因此相对于浏览器宽度，它并没有真正居中

---

是否有一种方法可以使文本真正居中，无论占用多少空间？

不建议这样做，但您可以这样做

#父级{
背景色：#eee；
高度：48px；
文本对齐：居中；
}
#学院{
背景色：#ff8b8b；
高度：48px；
显示：内联；
浮动：左；
}
#科尔赖特{
背景色：#c3d0ff；
高度：48px；
显示：内联；
浮动：对；
}
.头衔{
位置：绝对位置；
宽度：100px；
左：50%；
左边距：-50px；
}
左左
标题
正确的
标题-这一个是真正的中心。​

---

您使标题

位置：绝对
。给它一个宽度<代码>左侧：50%
<代码>左边距：

减去宽度的一半。它将保持在中心位置。但我并不建议你这样做…

如果你在标题周围加上这样一个div：

<div style="position: absolute;left: 50%">Title</div>

标题

您在Webkit方面做得很好。

<div align="left" style="border:5px solid white; text-align:center; position:relative">

<div align="left" style="border:4px solid brown; float:left; width:100px; position:absolute"><span>left</span></div>
<div align="left" style="border:4px solid brown; right:0; width:200px; position:absolute"><span>right</span></div>

<span>really centered</span></div>

左边
正确的
真正居中

#parent {
      background-color: #eee;
      height: 48px;
      text-align: center;
}
#colLeft {
      background-color: #ff8b8b;
      height: 48px;
      display: inline;
      float: left;
}
#colRight {
      background-color: #c3d0ff;
      height: 48px;
      display: inline;
      float: right;
}
.title{
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
}

<div id="parent" style="width:100%">
      <div id="colLeft">left left left left</div>
    <div class="title">Title</div>
      <div id="colRight">right</div>
 </div>

 <div style="width:100%; text-align:center">Title - this one is really centered.</div>​

<div style="position: absolute;left: 50%">Title</div>

<div align="left" style="border:5px solid white; text-align:center; position:relative">

<div align="left" style="border:4px solid brown; float:left; width:100px; position:absolute"><span>left</span></div>
<div align="left" style="border:4px solid brown; right:0; width:200px; position:absolute"><span>right</span></div>

<span>really centered</span></div>