在DIV中居中DIV？

Question

在将一个DIV与DIV居中时，我需要帮助。

我想要一个容器DIV，它是自动宽度的，它占据了屏幕的整个宽度（我们称它为headerContainer。

在headerContainer中，我想要再添加3个DIV：

• 左DIV（400像素宽）
• 中心DIV（100像素宽）
• 正确的DIV（200像素宽）。

我想要中心DIV直接在屏幕中间。 现在，我只能将其置于左右DIV之间的中心。

谢谢你的帮助。

Answer 1

这可行。

.headerContainer{
  width:auto !important;
}
.leftDiv{
  float:left;
  width:400px;
}
.rightDiv{
  float:right;
  width:200px;
}
.centerDiv{
  display:inline;
  width:100px;
  margin-left:auto;
  margin-right:auto;
}

。

<div class="headerContainer">
 <div class="leftDiv"></div>
 <div class="centerDiv"></div>
 <div class="rightDiv"></div>
</div>

Answer 2

CSS：

.leftDiv{
  float: left;
  width: 400px;
}
.rightDiv{
  float: right;
  width: 200px;
}
.centerDiv{
  width: 100px;
  margin: 0 auto;
}

HTML：

<div>
   <div class="leftDiv">left</div>
   <div class="rightDiv">right</div>
   <div class="centerDiv">center</div>
</div>

演示：

代码： http ： //jsfiddle.net/Xxwrm/6/

全屏显示： http ： //jsfiddle.net/Xxwrm/6/show

Answer 3

由于css3具有flex概念，因此可以使用现代解决方案。

 .parent { display: flex; height: 300px; /* Or whatever */ background-color: green; } .child { width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ background-color: yellow; } 

 <div class="parent"> <div class="child ">Div1</div> </div> 

Answer 4

您可以做的是在末尾添加另一个div，使双方相等，并设置visibility: hidden; （不display: none; ）； 这样，它将居中div。

例如，在这种情况下，您将有一个@ 400px，另一个@ 100px，另一个@ 200px和另一个隐藏@ 200px。

问候，理查德

Answer 5

<div class="headerContainer">
 <div class="leftDiv">left</div>
 <div class="rightDiv">right</div>
 <div class="centerDiv">center</div>
</div>

带有此CSS的HTML可以正常工作。 我给DIV上色以使其显而易见。

.headerContainer{
  width:auto;
}
.leftDiv{
  float:left;
  width:400px;
  background:pink;
}
.centerDiv{
  width:100px;
/*
  margin-left:auto;
  margin-right:auto;
*/
  margin:0 auto;
  background:cyan;
}
.rightDiv{
  float:right;
  width:200px;
  background:lightgray;
}

但是，如果屏幕的宽度不是700px ，您将获得一些环绕效果。

这也是一个小提琴： http : //jsfiddle.net/johnpapa/9bN2p/