Html 两个div之间的中间div

如何居中。中间的div在另外两个div之间？我试过边际：0自动；左边距：自动，右边距：自动；但是我不能达到正确的效果。这个。中间的div应该在两者之间

去全屏看看我的意思

多谢各位

div{
边界半径：4px；
-moz框大小：边框框；
-webkit框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
#标题{
高度：52px；
宽度：计算（100%-16px）；
背景色：#B2D490；
z指数：1；
位置：固定；
排名前10名；
}
h1{
颜色：#FFFFFF；
左侧填充：25px；
保证金：0；
显示：内联；
字体大小：27px；
线高：50px；
}
h2，h3，h4，h5，h6{
左侧填充：10px；
利润率：10px 0 10px 0 px；
颜色：#00457D；
}
.左{
宽度：300px；
背景色：#C7E6FF；
浮动：左；
利润上限：64px；
}
.中{
宽度：300px；
背景色：#DEF0FF；
利润上限：64px；
浮动：左；
}
.对{
宽度：300px；
背景色：#C7E6FF；
浮动：对；
利润上限：64px；
}
#页脚{
高度：35px；
宽度：100%；
背景色：#57C449；
明确：两者皆有；
位置：相对位置；
边缘顶部：10px；
}
p{
颜色：#00579E；
}
#页脚p{
颜色：#FFFFFF；
文本对齐：居中；
保证金：自动；
线高：35px；
}
跨度{
颜色：#D4EBFF；
}

我的简历
我的简历
左列

一些文本

一些文本

一些文本

一些文本

一些文本


中柱

一些文本

一些文本

一些文本


右栏

一些文本

一些文本

一些文本


©2015我-程序员

---

这就是你要找的

您可以将3个容器包装成一个容器，然后使用

flexbox

基本上，我添加了一个带有class

container center

的容器，这个css：

.container-center {
    display: flex;
    justify-content: space-between;
    }

如本

（我还从

右侧

，

中间

，

左侧

）移除了浮点。

使用浮点实现这一点并非易事，但如果将所有元素包装在一个div（或其他分区元素）中，并使用

flexbox

，则更简单

但是，您应该注意，即使使用

flexbox

，这也要求两个“side”元素具有相同的宽度

因为SO代码段的宽度不受限制

div{
边界半径：4px；
-moz框大小：边框框；
-webkit框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
h1{
颜色：#FFFFFF；
左侧填充：25px；
保证金：0；
显示：内联；
字体大小：27px；
线高：50px；
}
h2，h3，h4，h5，h6{
左侧填充：10px；
利润率：10px 0 10px 0 px；
颜色：#00457D；
}
主要{
溢出：隐藏；
填充顶部：64px；
显示器：flex；
证明内容：之间的空间；
}
.左{
宽度：300px；
背景色：#C7E6FF；
}
.中{
宽度：300px；
背景色：#DEF0FF；
}
.对{
宽度：300px；
背景色：#C7E6FF；
}
p{
颜色：#00579E；
}
跨度{
颜色：#D4EBFF；
}

左列

一些文本

一些文本

一些文本

一些文本

一些文本


中柱


一些文本



一些文本



一些文本



右栏

一些文本

一些文本

一些文本

这里有一种方法可以使用给定的HTML和浮动来实现

首先，在

#header

中，修复语法，以便

top:10px

，您需要单位（px）

由于您的三个

div

具有已知的宽度，您可以利用

calc

CSS函数来确定

的右边距
如下:

页面中心位于50%位置。取200px表示
.left
元素的宽度，然后取100px表示
.middle
元素的一半宽度。最终的结果是，<>代码>中间< /Cord>元素出现在页面的中间，正如您所希望的。
但是，您可能需要为页面指定最小宽度，否则如果页面宽度足够窄，
.middle
元素可能与
.left
重叠。或者，使用媒体查询处理小屏幕

（请注意，我使用了200px的宽度而不是300px的宽度，因此演示可以安装在代码编辑器的小窗口中。）


div{
边界半径：4px；
-moz框大小：边框框；
-webkit框大小：边框框；
-ms框尺寸：边框框；
框大小：边框框；
}
#标题{
高度：52px；
宽度：计算（100%-16px）；
背景色：#B2D490；
z指数：1；
位置：固定；
顶部：10px；
}
h1{
颜色：#FFFFFF；
左侧填充：25px；
保证金：0；
显示：内联；
字体大小：27px；
线高：50px；
}
h2，h3，h4，h5，h6{
左侧填充：10px；
利润率：10px 0 10px 0 px；
颜色：#00457D；
}
.左{
宽度：200px；
背景色：#C7E6FF；
浮动：左；
利润上限：64px；
保证金权利：计算（50%-300px）；
}
.中{
宽度：200px；
背景色：#DEF0FF；
利润上限：64px；
浮动：左；
}
.对{
宽度：200px；
背景色：#C7E6FF；
浮动：对；
利润上限：64px；
}
#页脚{
高度：35px；
宽度：100%；
背景色：#57C449；
明确：两者皆有；
职位：
.container-center {
    display: flex;
    justify-content: space-between;
    }

margin-right: calc(50% - 300px);