如何在媒体查询设置的流体布局中垂直和水平居中子元素？

Question

我正在尝试实现某种流畅的布局，其中每个 DIV 的内容在垂直和水平方向上居中。但是，我的中间行（A、B、C）一直存在垂直 and/or 水平对齐问题。

目标是让它像这样工作：

Note: If there's a way I can have the option to set the Mobile layout's "C" area fluid as well (without having to change the HTML, just the CSS, so that I can test which option works best), that'd be a bonus!

这是 HTML 的片段：

<div class="page">
    <div class="col col-top">top</div>
    <div class="col col-mid">
        <div class="col col-left">
            <div class="centerBox"><div class='debugBox'></div></div>
        </div>
        <div class="col col-center">
            <div class="centerBox"><div class='debugBox'></div></div>
        </div>
        <div class="col col-right">
            <div class="centerBox"><div class='debugBox'></div></div>
        </div>
    </div>
    <div class="col col-bottom">bottom</div>
</div>

我不确定 "wrapper" DIV 和 "centerBox" class 是否真的有必要（它们被设置为 display: table-cell 而每个 col class 都设置为 display: table 到 表现得 类似于表格，但这会导致将这些区域与 position: absolute 及其左/右/上/下属性的 % 值。

例如，如果 "C" 区域设置为 display: table，则会发生这种情况：

如果我将 "C" 区域更改为 display: block;，那么它会填满整个中心区域，但是...

...水平和垂直对齐在其中中断。

使用 "Ghost" DIV 元素（正如 Chris Coyier 在 css-tricks article、"Centering in the Unknown" 中讨论的那样）是否可以更好地获得正确对齐？

Answer 1

好的，这个解决方案没有框架，纯粹 CSS 使用 flexbox。只要布局是水平的，C 就有固定的宽度。移动时，C占据整个宽度，高度可变。

header,
footer {
  padding: 10px;
  background-color: lightblue;
}
main {
  display: flex;
  flex-direction: row;
}

main > div {
  padding: 10px;
  background-color: tomato;
  flex-grow: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
}
main > div:nth-child(2) {
  background-color: olive;
}

.fixed {
  width: 400px;
}

@media (max-width: 768px) {
  main {
    flex-direction: column;
  }
  .fixed {
    width: auto;
  }
}

<header>Top</header>
<main>
  <div>A</div>
  <div class="fixed">C</div>
  <div>B</div>
</main>
<footer>Bottom</footer>

来笔（拖动边框看手机布局）： Codepen

Answer 2

这是您提供的代码的样式。要记住的一件事是你的中间列，是一个固定的宽度，它有助于 calc() 函数。中间容器一半宽度的 50%。这在 IE 8 或更低版本中不起作用，因此如果您关心这些浏览器，则必须编写一个 JS 解决方案。

.page {
    width: 100%;
    position: relative;
}

.col-top {
    background: #0f0;
    width: 100%;
    height: 50px;
}

.page .col-mid {
    width: 100%;
    display: table;
}

.page .col-mid .col {
    width: calc(50% - 250px);;
    height: 100px;
    background: #f00;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.page .col-mid .col-center {
    width: 500px;
    background: #00f;
}

.debugBox {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #000;
    vertical-align: middle;
}

.col-bottom {
    clear: both;
    height: 50px;
    background: #0f0;
}

这里有一个工作示例：

https://jsfiddle.net/g45pwedd/

而且您不需要某些容器元素，如您所说。

更新

抱歉，忘记添加响应。我不确定你是否仍然需要垂直对齐来响应。这个解决方案删除了垂直对齐，因为我怀疑移动显示器是否需要它：

@media (max-width: 768px) {
  .page .col-mid .col {
      display: block;
      width: 100%;
  }
}

https://jsfiddle.net/g45pwedd/2/

Answer 3

在bootstrap 4

将子元素水平居中，使用bootstrap-4 class

justify-content-center

将子项垂直居中，使用bootstrap-4 class

 align-items-center

但请记住不要忘记将 d-flex class 与这些一起使用这是一个 bootstrap-4 实用程序 class，就像这样

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

注意：如果此代码不起作用，请务必添加 bootstrap-4 实用程序

如何在媒体查询设置的流体布局中垂直和水平居中子元素？

How to vertically & horizontally center children elements in a fluid layout set by media queries?

html

css

vertical-alignment

centering

responsive-design