如果你不想改变你的HTML结构，你也可以添加text-align: center;到包装器元素和一个display: inline-block;到居中的元素。

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

现场演示:http://jsfiddle.net/CH9K8/

#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }

我喜欢我的杠铃紧而有活力。这是css3和HTML 5

First, setting the Width to 100px is limiting. Don't do it. Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0; instead for that scenario. You are using id's (hash #container, #left, etc) instead of classes (.container, .left, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead. For HTML, no need to swap order for: left, center, & right. display: inline-block; fixes this, returning your code to something cleaner and logically in order again. Lastly, you need to clear the floats all up so that it doesn't mess with future <div>. You do this with the clear: both;

总结:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

如果使用HAML和SASS，则有加分项;)

HAML:

.container
  .left
  .center
  .right
  .clear

萨斯:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}

可能的答案，如果你想保持HTML的顺序而不使用flex。

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

码笔链接

有一些技巧可以用于对齐元素。

01. 使用桌子戏法

.container { 显示:表; ｝ .left { 背景:绿色; 显示:表格单元; 宽度:33.33大众; ｝ .center { 背景:黄金; 显示:表格单元; 宽度:33.33大众; ｝ 铃声{ 背景:灰色; 显示:表格单元; 宽度:33.33大众; ｝ < div class = "容器" > < div class = "左" > 左 < / div > < div class = "中心" > 中心 < / div > < div class = "正确" > 正确的 < / div > < / div >

02. 使用弹性技巧

.container { 显示:flex; justify-content:中心; 对齐项目:中心; ｝ .left { 背景:绿色; 宽度:33.33大众; ｝ .center { 背景:黄金; 宽度:33.33大众; ｝ 铃声{ 背景:灰色; 宽度:33.33大众; ｝ < div class = "容器" > < div class = "左" > 左 < / div > < div class = "中心" > 中心 < / div > < div class = "正确" > 正确的 < / div > < / div >

03. 使用浮动把戏

.left { 背景:绿色; 宽度:100 px; 浮:左; ｝ .center { 背景:黄金; 宽度:100 px; 浮:左; ｝ 铃声{ 背景:灰色; 宽度:100 px; 浮:左; ｝ < div class = "容器" > < div class = "左" > 左 < / div > < div class = "中心" > 中心 < / div > < div class = "正确" > 正确的 < / div > < / div >

使用CSS，像这样放置你的div(浮动优先):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

附注:你也可以向右浮动，然后向左浮动，然后向中心浮动。重要的是，浮动出现在“主”中心部分之前。

P.P.S.你经常想要最后在#容器里的这个片段:<div style="clear:both;></div>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。