html - 如何在响应模式下垂直居中 3 div(移动与桌面)

Question

当我尝试做响应模式时，调整 3 div 从水平到垂直，它们不会垂直对齐和居中。

在这里你可以看到我的代码； https://codepen.io/josemb94/pen/bXaeYp

<center>
  <div id="container">
                <div id="left">
                    <h2>11111</h2>
                </div>
                <div id="right">
                    <h2>333333</h2>
                </div>
                <div id="center">
                    <h2>22222</h2>
                </div>
  </div>
</center>

 #container {
            width: 57.5%;
            text-align: center;
        }

        #left {
            float: left;
            width: 200px;
            height: 120px;
            border-style: solid;
        }

        #center {
            display: inline-block;
            margin: 0 auto;
            width: 200px;
            height: 120px;
            border-style: solid;
        }

        #right {
            float: right;
            width: 200px;
            height: 120px;
            border-style: solid;
        }

我尝试了 3 或 4 个 css 样式，但都有效...

我的结果:https://i.imgur.com/SW1xek9.png
我的期望:https://i.imgur.com/Afjn4YO.png

Answer 1

而不是 float 你的 #left和 #right元素，而是给它们 display: block和一个 margin的 0 auto :

#container {
  width: 57.5%;
  text-align: center;
}

#left {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 120px;
  border-style: solid;
}

#center {
  display: inline-block;
  margin: 0 auto;
  width: 200px;
  height: 120px;
  border-style: solid;
}

#right {
  display: inline-block;
  margin: 0 auto;
  width: 200px;
  height: 120px;
  border-style: solid;
}

<div id="container">
  <div id="left">
    <h2>11111</h2>
  </div>
  <div id="right">
    <h2>333333</h2>
  </div>
  <div id="center">
    <h2>22222</h2>
  </div>
</div>

现在所有三个子元素都具有相同的样式，因此您可以简单地使用如下 CSS:

#container {
  width: 57.5%;
  text-align: center;
}

#left, #center, #right {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 120px;
  border-style: solid;
}

<div id="container">
  <div id="left">
    <h2>11111</h2>
  </div>
  <div id="right">
    <h2>333333</h2>
  </div>
  <div id="center">
    <h2>22222</h2>
  </div>
</div>

您可以使用 child combinator selector ( > ) 进一步简化它，消除了对 HTML 元素的任何 ID 或类的需要:

#container {
  width: 57.5%;
  text-align: center;
}

#container > div {
  display: block;
  margin: 0 auto;
  width: 200px;
  height: 120px;
  border-style: solid;
}

<div id="container">
  <div>
    <h2>11111</h2>
  </div>
  <div>
    <h2>333333</h2>
  </div>
  <div>
    <h2>22222</h2>
  </div>
</div>

请注意 <center>标签是 not supported in HTML5 ，所以我在上面的例子中把它去掉了。

另请注意，您可以选择 display: inline-block相反，如果有足够的 width，这将允许元素并排放置在#container收容它们。