34

使用 CSS flexbox，如何在不使用 cssheight属性的情况下同时将所有 div 的内容垂直居中，同时保持所有 div 的高度相同？

HTML

<!DOCTYPE html>
<html>
  <body>
    <div class="Grid">
      <div class="Grid-cell">
        1<br>
        1<br>
        1<br>
        1<br>
      </div>
      <div class="Grid-cell">2</div>
      <div class="Grid-cell">
        3<br>
        3<br>
      </div>
    </div>
  </body>
</html>

CSS：

.Grid {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.Grid-cell {
  flex: 1;
  text-align: center;
}

（见http://jsbin.com/efaCEVa/1/edit）

4

4 回答 4

50

HTML

<div class='outer'>
    <div class='inner'>A</div>
    <div class='inner'>B</div>
    <div class='inner'>C</div>
</div>

CSS

.outer {
    align-items: stretch;
    display: flex;
}

.inner {
    align-items: center;
    display: flex;
}
于 2017-06-21T23:58:32.947 回答
2 
  .item-wrapper
    display: flex
    align-items: stretch
    justify-content: center

  .item
    width: 400px
    display: flex
于 2016-07-25T18:38:58.227 回答
0

如果您设置flex: 1在孩子身上，它将拉伸以填充空间。

然后你可以align-items: center在子容器上。

.container {
  display: flex;
}

.item {
  flex: 1;
  display: flex;
  align-items: center;
  width: 200px;
  background-color: cadetblue;
  color: white;
  padding: 1rem;
  margin: 1rem;
}

.content {
  padding: 1rem;
  border: 2px solid lightcoral;
}
    <div class="container">
        <div class="item">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Pulvinar neque laoreet suspendisse interdum consectetur libero.
                Diam sit amet nisl suscipit adipiscing bibendum est.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Duis tristique sollicitudin nibh sit amet. Platea dictumst
                vestibulum rhoncus est pellentesque.
            </div>
        </div>
        <div class="item">
            <div class="content">
                Aliquam vestibulum morbi blandit cursus
            </div>
        </div>
    </div>

于 2021-05-26T17:51:11.213 回答
-5

没有理由对 Flexbox 执行此操作。table/table-cell 属性已经能够做到这一点很长时间了：

http://cssdeck.com/labs/qsirepkh

ul {
  display: table; /* optional */
}

li {
  display: table-cell;
  vertical-align: middle;
}

这就是 Flexbox 的样子：

http://codepen.io/cimmanon/pen/BfDAk

ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

li {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
于 2013-09-29T12:14:52.033 回答