两个 div 之间的中心 div答案

【问题标题】：Center div between two divs两个 div 之间的中心 div
【发布时间】：2015-09-09 14:02:49
【问题描述】：

如何在其他两个 div 之间居中 .middle div？我试过 margin: 0 auto;左边距：自动，右边距：自动；等等，但我无法达到正确的效果。这个 .middle div 应该在两者之间。

全屏看看我的意思。

谢谢。

div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 300px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
}
.middle {
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 300px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}

	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<body>
	<div id="header">
	    <h1>My <span>Resume</span></h1>
	</div>
	<div class="left">
	    <h2>Left Column</h2>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	        </ul>
	</div>
		<div class="middle">
	    <h2>Centered Center Column</h2>
	        <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
	</div>
	<div class="right">
	    <h4>Right Column</h4>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	       </ul>
	</div>
	<div style="clear:both; border:none; border-radius: none;"></div>
	<div id="footer">
	    <p>© 2015 Me - the Programmer</p>
	</div>

【问题讨论】：

标签： html css

【解决方案1】：

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

基本上我添加了一个带有container-center类的容器和这个css：

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

就像这个JSFIDDLE

（我还从right、middle、left 中删除了浮动）

【讨论】：

【解决方案2】：

没有真正简单的方法可以用浮点数做到这一点但是如果你将所有元素包装在一个div（或其他分段元素）中并使用@987654322会更简单@。

但是您应该注意，即使使用flexbox，这也要求两个“边”元素具有相同的宽度。

Codepen Demo 因为 SO 片段的宽度受到限制。

div {
  border-radius: 4px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

h1 {
  color: #FFFFFF;
  padding-left: 25px;
  margin: 0;
  display: inline;
  font-size: 27px;
  line-height: 50px;
}

h2,h3,h4,h5,h6 {
  padding-left: 10px;
  margin: 10px 0 10px 0px;
  color: #00457D;
}

main {
  overflow: hidden;
  padding-top: 64px;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 300px;
  background-color: #C7E6FF;
}

.middle {
  width: 300px;
  background-color: #DEF0FF;
}

.right {
  width: 300px;
  background-color: #C7E6FF;
}

p {
  color: #00579E;
}

span {
  color: #D4EBFF;
}

<main>
  <div class="left">
    <h2>Left Column</h2>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
  <div class="middle">
    <h2>Centered Center Column</h2>
    <ul>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
      <li>
        <p>Some Text</p>
      </li>
    </ul>
  </div>
  <div class="right">
    <h4>Right Column</h4>
    <ul>
      <p>Some Text</p>
      <p>Some Text</p>
      <p>Some Text</p>
    </ul>
  </div>
</main>

【讨论】：

【解决方案3】：

这是使用给定 HTML 并使用浮点数的一种方法。

首先，在#header 中，修正语法，使top: 10px，你需要单位（px）。

由于您的三个div 具有已知宽度，您可以利用calc CSS 函数来确定.left 的右边距为如下：

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

页面中心位于 50% 的位置。去掉.left元素的宽度200px，然后去掉.middle元素的半宽度100px。最终结果是 .middle 元素会出现在页面中间，如您所愿。

但是，您可能需要为页面指定最小宽度，否则如果页面宽度足够窄，.middle 元素可能会与.left 重叠。或者，使用媒体查询处理小屏幕。

（请注意，我使用了 200 像素而不是 300 像素的宽度，以便演示适合代码编辑器的小窗口。）

div {
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
#header {
    height: 52px;
    width: calc(100% - 16px);
    background-color: #B2D490;
    z-index: 1;
    position: fixed;
    top: 10px;
}
h1 {
    color: #FFFFFF;
    padding-left: 25px;
    margin: 0;
    display: inline;
    font-size: 27px;
    line-height: 50px;
}
h2, h3, h4, h5, h6 {
    padding-left: 10px;
    margin: 10px 0 10px 0px;
    color: #00457D;
}
.left {
    width: 200px;
    background-color: #C7E6FF;
    float: left;
    margin-top: 64px;
    margin-right: calc(50% - 300px);
}
.middle {
    width: 200px;
    background-color: #DEF0FF;
    margin-top: 64px;
    float: left;
}
.right {
    width: 200px;
    background-color: #C7E6FF;
    float: right;
    margin-top: 64px;
}
#footer {
    height: 35px;
    width: 100%;
    background-color: #57C449;
    clear: both;
    position: relative;
    margin-top: 10px;
}
p {
    color: #00579E;
}
#footer p {
    color: #FFFFFF;
    text-align: center;
    margin: auto;
    line-height: 35px;
}
span {
    color: #D4EBFF;
}

<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title>My Resume</title>
	</head>
	<body>
	<div id="header">
	    <h1>My <span>Resume</span></h1>
	</div>
	<div class="left">
	    <h2>Left Column</h2>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	        </ul>
	</div>
		<div class="middle">
	    <h2>Centered Center Column</h2>
	        <ul>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
                <li><p>Some Text</p></li>
        </ul>
	</div>
	<div class="right">
	    <h4>Right Column</h4>
	        <ul>
	            <p>Some Text</p>
	            <p>Some Text</p>
	            <p>Some Text</p>
	       </ul>
	</div>
	<div style="clear:both; border:none; border-radius: none;"></div>
	<div id="footer">
	    <p>© 2015 Me - the Programmer</p>
	</div>

【讨论】：

谢谢！一切都很完美。虽然我假设你的意思是 300px（其中 150px 是一半）而不是 200px。
@ArtemZ 我修复了原始帖子中的数字，使其与 200px 宽度一致。在您使用 300 像素宽的元素的情况下，偏移量将为 450 像素（300 + 300/2）。万事如意！

【解决方案4】：

 .middle {
    margin: auto;
    width: 300px;
    background-color: #DEF0FF;
    margin-top: 64px;
}

这就是你要找的东西？

【讨论】：

边距：自动；应该在其容器内水平居中一个元素。如果我没记错的话。
如果操作不想要我的答案，操作可以选择不将其标记为答案。我只知道 margin:auto 使元素居中。您不必对此很聪明:-)