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

Posted 2023-03-05

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

【英文标题】：How to vertically & horizontally center children elements in a fluid layout set by media queries?

【发布时间】：2016-02-25 19:47:27

【问题描述】：

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

目标是让它像这样工作：

注意：如果有办法让我也可以选择将移动布局的“C”区域设置为流畅（无需更改 html，只需更改 CSS，这样我可以测试哪个选项效果最好），那将是一个奖励！

这是 HTML 的 sn-p：

<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>

我不确定是否真的需要带有“centerBox”类的“包装器”DIV（它们设置为display: table-cell，而每个col类都设置为display: table 表现类似于表格，但这会导致问题将这些区域放置为具有position: absolute 和左/右/上/下属性的百分比值。

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

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

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

使用“Ghost”DIV 元素（正如 Chris Coyier 的 css-tricks article，“Centering in the Unknown”中所讨论的那样）会更好地获得正确的对齐方式吗？

【问题讨论】：

有没有想过为此使用一个库？例如像引导程序？

你应该阅读使用 CSS Flexbox

@Thomas：tbh 我从来没有使用引导程序的经验。我希望有一个不依赖 javascript 的解决方案（如果这与引导程序无关，请原谅我的无知！）但是您是否建议使用它更容易创建复杂的流体布局（各种屏幕尺寸的变化）？

【参考方案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

【讨论】：

很好地使用了 flexbox...但是您没有解决中间行的垂直对齐问题。更新代码以反映这一点，我可能会承认你的回答:)

是的...您只是缺少 justify-content: center; 以使项目也水平居中。现在我会为你的答案+1 :) 你和我的唯一区别是我的工作在 IE 9 中，而你的工作在 Opera Mini 中。世界其他地方可能不太关心的两个浏览器:)

【参考方案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/

【参考方案3】：

在引导程序 4

要将子元素水平居中，请使用 bootstrap-4 类

justify-content-center

垂直居中，使用 bootstrap-4 类

 align-items-center

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

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

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