使用Bootstrap 3我创建了3个等宽的div(在12列布局中，每个div 4列)。 这样，即使左/右部分的宽度不同(如果它们没有溢出列的空间)，您也可以保持中心区域居中。

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

为了创建没有库的结构，我从Bootstrap CSS复制了一些规则。

HTML:

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

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

科普彭

可能的答案，如果你想保持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%);
}

码笔链接

最简单的解决方案是用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;
}

使用Flexbox水平对齐三个div

下面是一个CSS3方法，用于在另一个div中水平对齐div。

#container { display: flex; /* establish flex container */ flex-direction: row; /* default value; can be omitted */ flex-wrap: nowrap; /* default value; can be omitted */ justify-content: space-between; /* switched from default (flex-start, see below) */ background-color: lightyellow; } #container > div { width: 100px; height: 100px; border: 2px dashed red; } <div id="container"> <div></div> <div></div> <div></div> </div>

js小提琴

justify-content属性有五个值:

flex-start(默认) flex-end 中心 之间的空间 空间

在所有情况下，三个div都在同一行上。有关每个值的描述，请参见:https://stackoverflow.com/a/33856609/3597276

flexbox的好处:

最少的代码;非常有效的 对中，无论是垂直还是水平，都是简单易行的 等高列简单易行 调整伸缩元素的多个选项 这是响应 与浮动和桌子不同，它们提供的布局容量有限，因为它们从未用于建筑布局， flexbox是一种现代(CSS3)技术，具有广泛的选项。

欲了解更多关于flexbox的信息，请访问:

调整伸缩项目的方法 使用CSS灵活的盒子~ MDN Flexbox ~ CSS-Tricks的完整指南 什么Flexbox?!~ YouTube视频教程

浏览器支持:除IE < 10外，所有主流浏览器都支持Flexbox。一些最新版本的浏览器，如Safari 8和IE10，需要使用厂商前缀。要快速添加前缀，请使用Autoprefixer。更多细节在这个答案中。

如果你不想改变你的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/

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

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 >