最简单的解决方案是用3列组成一个表，并将该表居中。

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

使用CSS3 Flexbox可以很容易地做到这一点，这个功能将在未来被几乎所有浏览器使用(当<IE9完全死亡时)。

查看浏览器兼容性表

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Output: .container { display: flex; flex-flow: row nowrap; /* Align on the same line */ justify-content: space-between; /* Equal margin between the child elements */ } /* For Presentation, not needed */ .container > div { background: #5F85DB; padding: 5px; color: #fff; font-weight: bold; font-family: Tahoma; } <div class="container"> <div class="left"> Left </div> <div class="center"> Center </div> <div class="right"> Right </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>，它将垂直扩展#容器以包含两侧浮动，而不是仅从#中心取高度，并可能允许两侧突出底部。

使用CSS网格

layout { display: grid; grid-template-columns: repeat(3,1fr); } start-column { justify-self: start; } center-column { justify-self: center; } end-column { justify-self: end; } <layout> <start-column> <button>Start</button> </start-column> <center-column> <p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p> </center-column> <end-column> <a href="#">End</a> </end-column> </layout>

#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 }

你可以试试这个:

你的html代码是这样的:

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

你的CSS代码是这样的:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

所以，它的输出应该是这样的:

[[LEFT]       [CENTER]        [RIGHT]]