首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >高度未知时使用flexbox垂直居中时的问题

高度未知时使用flexbox垂直居中时的问题
EN

Stack Overflow用户
提问于 2014-07-03 02:07:50
回答 3查看 10.7K关注 0票数 68

我的布局有一个容器flex-container和一个子容器。

HTML:

代码语言:javascript
复制
<div class="flex-container">
  <div>text</div>
</div>

容器和子对象具有未知高度。我们的目标是:

  • 如果孩子的高度低于容器的高度,它将水平和垂直居中显示。
  • 如果孩子的高度大于容器的高度,它将调整到顶部和底部,我们可以滚动。

方案:

使用flexbox使元素居中的最快方法如下:

代码语言:javascript
复制
.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
代码语言:javascript
复制
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen:http://www.codepen.io/ces/pen/slicw

但是,如果容器的子对象具有更大的高度,则不会正确显示该子对象。该子对象显示为剪切(仅顶部部分)。

代码语言:javascript
复制
html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
代码语言:javascript
复制
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen:http://www.codepen.io/ces/pen/sGtfK

方案:

有没有办法解决这个问题?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-07-03 10:11:14

我找到了解决方案:

代码语言:javascript
复制
.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

.flex-container > div {
    margin: auto; /* horizontal and vertical align */
}

代码语言:javascript
复制
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.flex-container {
    display: flex;
    width: 100%;
    height: 100px; /* change height to 300px */
    overflow-y: scroll;
    background: #2a4;
}

.flex-container > div {
    padding: 1em 1.5em;
    margin: auto;
    background: #E77E23;
    width: 400px;
}
代码语言:javascript
复制
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen:http://codepen.io/ces/pen/Idklh

票数 138
EN

Stack Overflow用户

发布于 2021-12-31 14:59:19

不要使用justify-content: centeralign-items: center。要实现中心对齐,只需将空元素放在两侧,并将空元素设置为flex: 1,这样它们就可以将中心元素推到中心。

票数 0
EN

Stack Overflow用户

发布于 2015-10-28 23:43:22

.flex-container > div中添加align-self:flex-start;也可以解决这个问题。

请参阅:http://www.w3.org/TR/css-flexbox-1/#auto-margins

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24538100

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档