如何在响应模式下垂直居中 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

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

#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，这将允许元素并排放置，前提是 #container 中有足够的 width 来包含它们.

Answer 2

您可以使用 grid 布局并根据需要在媒体查询中设置列模板。

#container {
  width: 100%;
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  width: 200px;
  height: 120px;
  border-style: solid;
  justify-self: center;
}

@media only screen and (max-width: 600px) {
  #container {
    grid-template-columns: 1fr;
  }
}

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

如何在响应模式下垂直居中 3 div（移动与桌面）

How to keep centered 3 divs vertically in responsive mode (mobile vs desktop)

html

css

containers

alignment

css-float