Issue when centering vertically with flexbox when heights are unknown

My layout have 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>

---

我找到了解决方案：

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

---

Add align-self:flex-start; to .flex-container > div can resolve this problem too.

See: http://www.w3.org/TR/css-flexbox-1/#auto-margins

链接地址: http://www.djcxy.com/p/13254.html

上一篇: 如何将边距或填充设置为父容器高度的百分比？

下一篇: 当高度未知时，使用柔性盒垂直居中时发出问题