Question

我试图以反应为中心。但是如果不设置宽度我就无法做到......

<div class="wrapper">
    <div class="container">
        <div class="left box">Content</div>
        <div class="right box">Content</div>
    </div>
</div>

.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:69%;max-width:350px; background:blue}
.right {width:29%;max-width:150px; background:red}
.box {float:left;padding:20px}

如何将.container保持在中间位置？

演示：http://jsfiddle.net/z9zydnwL/

Answer 1

Flexbox甚至可以让漂浮的孩子居中！

因此，我只需将display:flex和justify-content: center;添加到容器

即可

.container {
    margin: 10px auto;
    display:flex;
    justify-content: center; /* align horizontal */
}

<强> FIDDLE

这些天

Browser support也很好

＆＃13;

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  /* align horizontal */
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  float: left;
  padding: 20px
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

＆＃13;

Answer 2

一种解决方案是使用内联块替换float：

＆＃13;

.wrapper {
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

＆＃13;

Answer 3

我认为你应该使用下面的css

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

<div class="wrapper">
    <div class="container">
        <div class="left box">Content</div>
        <div class="right box">Content</div>
    </div>
</div>

Answer 4

是的，您可以根据需要将div放在中心而不使用width属性。

假设你有一些宽度可变的内容。如果它只是文本，您可以使用text-align:center。但是说它是一个图像，并且该图像可能具有不同的尺寸。你如何一直把它放在页面上？

首先，将内容放在浮动的div中，因为浮动的div会缩小内容。其次，将div包装在另一个浮动的div中。

现在这里是好事。相对定位外部浮动（黄色）left:50%，使左边缘位于页面的中间。然后相对定位内部浮动（红色）left:-50%，将其正好向左移动黄色div宽度的1/2，使其居中。请注意，黄色div和红色div的宽度完全相同，因为黄色也是一个浮点数，所以它是收缩包装以适应红色的。

包含背景颜色和高度，以便清楚地了解正在发生的事情。通常，黄色div没有高度规格，也没有填充，并将设置为您的背景颜色。红色div是我们试图集中的那个。

供参考，您可以查看链接 http://www.tightcss.com/centering/center_variable_width.htm

展示其工作原理的示例

    .container
    	{
    		float: left;
            position: relative;
            left: 50%;
            padding-top: 10px;
    	}
    	.center {
            float: left;
            position: relative;
            left: -50%;
            background: red;

    }

    <div class="main_container">
    	<div class="container">
      		<div class="center">sample content</div>
      		<div style="clear:both;"> </div>
    	</div>
        <div class="clear"> </div>
    </div>

Answer 5

您的填充值为.box。因此，左右框宽度也不合适。尝试减小宽度值然后它必须工作：

.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:67%;max-width:350px; background:blue}
.right {width:27%;max-width:150px; background:red}
.box {float:left;padding:20px}

Answer 6

您可以使用display: inline-block;

替换左边的浮动来尝试以下样式

.wrapper {width:100%; text-align:center}
.container {margin: 10px auto; font-size: 0}
.left {width:69%;max-width:350px; background:blue}
.right {width:29%;max-width:150px; background:red}
.box{
    display: inline-block;
    font-size: 14px; 
    padding: 20px 0;
}

Working Fiddle

Answer 7

使用

而不是浮动框

display: inline-block;

请参阅 DEMO 。

将div容器居中而不设置宽度

7 个答案: