如何在响应式页面上以百分比宽度居中 div？

Question

我有一个可以调整大小以适应桌面、平板电脑或 phone 的响应式页面。 phone 和平板电脑 css 没问题，但桌面有问题。区别在于包含所有内容的主要 div。

对于 phone 和平板电脑，主要 div 宽度是屏幕的 100%，但对于桌面，它应该固定在 900px 并且也在屏幕中央。

当我将它居中时，主要 div 不会根据其中的内容调整其高度，但它会针对其他屏幕尺寸。当我添加一个 float: left;到主div，它向右浮动，然后高度跟随其中的内容

这可能是一个非常简单的修复，但我已经尝试了我所知道的一切并进行了谷歌搜索，但没有找到解决方案。

谢谢大家！

body {
  background-color: #f1f1f1;
  margin: 0;
}
#main {
  background-color: #0000ff;
  color: #222222;
  float: left;
  height: auto;
  width: 100%;
}
/* Home Big
/*************************/

#home-big {
  height: auto;
  width: 100%;
}
#home-big h1 {
  background-color: #1eaccc;
  color: #ffffff;
  margin: 0;
  padding: 7px;
}
/* Home Big Content
/*************************/

.home-big-content {
  float: left;
  height: auto;
  margin-top: 10px;
  width: 100%;
}
/* Home Big Left
/*************************/

.home-big-left {
  background-color: #ffff00;
  float: left;
  height: auto;
  width: 50%;
}
.home-big-left img {
  height: auto;
  width: 100%;
}
/* Home Big Right
/*************************/

.home-big-right {
  float: left;
  height: auto;
  margin-left: 0;
  width: 50%;
}
/* TABLET SIZE
/*****************************************************************************/

@media all and (min-width: 600px) {
  #main {
    background-color: #00ff00;
    float: left;
    height: initial;
    padding: 10px 0;
  }
  #home-big {
    margin: 0 10px;
    width: initial;
  }
  .home-big-left {
    background-color: #ffff00;
  }
}
/* DESKTOP SIZE
/*****************************************************************************/

@media all and (min-width: 900px) {
  #main {
    background-color: #ff0000;
    float: initial;
    margin: 0 auto;
    width: 900px;
  }
  #home-big {
    margin: 0;
    width: initial;
  }
  .home-big-left {
    background-color: #ffff00;
  }
}

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>

<body>
  <section id="main">
    <article id="home-big">
      <h1>Headline</h1>

      <div class="home-big-content">
        <div class="home-big-left">
          Left
        </div>
        <div class="home-big-right">
          Right
        </div>
      </div>
    </article>
  </section>
</body>

</html>

Answer 1

您需要清除 #main 元素的浮动。我使用 micro clearfix.

使用如下：

<section id="main" class="cf"></section>

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}    
.cf:after {
    clear: both;
}

Answer 2

当你浮动东西时，你必须清除它或使用overflow: hidden

尝试：

.clearfix:after { 
    content: "";
    display: table;
    clear: both;
}

对所有包含浮动元素的容器应用 clearfix class，或使用 overflow: hidden;

如何在响应式页面上以百分比宽度居中 div？

How center div with percentage width on responsive page?

html

css

center