html - Flex-box 垂直居中不起作用

Question

我正在使用以下 HTML 和 CSS。刚刚熟悉了flex box，关注了this tutorial居中(水平，垂直)一些其他 HTML 元素:

<div>
  <div class="page-center">
     <div id="target_div">
       <h2 class="text-center">Connecting to the server</h2>
       <div class="progress">
         <div class="progress-bar progress-bar-striped active" style {{width: '100%'}}></div>
       </div>
     </div>
  </div> 
</div>

     .page-center {
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 100%;
      }

target_div 中的元素水平居中，但不是垂直居中。 知道为什么这不起作用吗？

Answer 1

现在，您将 div 的最大高度设置为 100%。您想要的是将最小高度设置为 100%。如果这不能解决问题，请确保您已将 html 和 body 元素的高度也设置为 100%，并使用:

html, body {
  height: 100%;
}

引用http://codepen.io/anon/pen/JYPGLL看到它的工作。请注意，如果我们删除 html 和 body 的样式，尽管最小高度设置为 100%，“page-center”div 会缩小以适合内容。