CSS网格可以轻松完成工作:

#{容器 显示:网格;/*(1)一个网格容器*/ grid-auto-flow:列;/*(2)列布局*/ justify-content:之间的空间;/*(3)对齐列*/ 背景颜色:浅黄色; ｝ #容器> div { 宽度:100 px; 身高:100 px; 边框:2px红色虚线; ｝ < div id = "容器" > < div > < / div > < div > < / div > < div > < / div > < / div >

使用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。更多细节在这个答案中。

以下是当我用图像作为中心元素时，我必须对接受的答案做出的更改:

确保图像包含在div中(在本例中是#center)。如果不是，你将不得不设置显示为block，它似乎是相对于浮动元素之间的空间居中。 确保设置图像和它的容器的大小: #{中心 保证金:0自动; ｝ #center， #center > img { 宽度:100 px; 高度:汽车; ｝

我做了另一次尝试来简化它，并在不需要容器的情况下实现它。

HTML

<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>

CSS

      .box1 {
      background-color: #ff0000;
      width: 200px;
      float: left;
    }
    
    .box2 {
      background-color: #00ff00;
      width: 200px;
      float: right;
    }
    
    .box3 {
      background-color: #0fffff;
      width: 200px;
      margin: 0 auto;
    }

你可以在JSFiddle现场看到它

使用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>

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