柔性盒垂直居中不起作用

Question

我正在使用以下HTML和CSS。我刚刚熟悉Flex箱，跟着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会缩小以适合内容。