当高度未知时使用 flexbox 垂直居中时出现问题 [英] Issue when centering vertically with flexbox when heights are unknown

问题描述

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

HTML:

<div>文本</div>

容器和孩子有一个未知的高度.目标是:

• 如果子元素的高度低于容器，它会在水平和垂直方向上居中显示.
• 如果孩子的高度大于容器，它会调整到顶部和底部，我们可以滚动.

方案:

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

.flex-container{显示:弹性；对齐项目:居中；/* 垂直的 */对齐内容:居中；/* 水平的 */宽度:100%；高度:300px；/* 例如目的 */溢出-y:滚动；背景:#2a4；}.flex 容器 >div{背景:#E77E23；宽度:400px；}

<div>Lorem ipsum dolor sat amet，consectetur adipisicing 精英.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 坐 amet，consectetur adipisicing 精英.Iure fugit voluptas eius nemo similique aperiam quis ut!Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit.

Codepen:

My layout has a container flex-container and a child.

HTML:

<div class="flex-container">
  <div>text</div>
</div>

The container and the child have an unknown height. And the goal is:

• If the child has a lower height than the container, it appears centered horizontally and vertically.
• If the child has a greater height than the container, it adjusts to the top and the bottom and we can do scroll.

Scheme:

The fastest way for centering a element with flexbox is the follow:

.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;
}

<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

But, if the container's child have a greater height, the child is not shown correctly. The child appears cutted (only the top part).

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

<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

Scheme:

Is there a way for resolve this issue?

解决方案

I found the solution:

.flex-container {
    display: flex; /* only */
    overflow-y: scroll;
}

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

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

<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

这篇关于当高度未知时使用 flexbox 垂直居中时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！