Question

我正在使用以下HTML和CSS。我刚刚熟悉了弹性框，并按照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的样式，＆＃34; page-center＆＃34;尽管最小高度设置为100％，div仍会缩小以适应内容。

柔性盒垂直居中不起作用

1 个答案: