html - 在 Chrome 中垂直对齐内容

Question

我发现 flex box 在 Chrome 中无法按照我希望的方式工作，但它在其他浏览器(iOS 移动设备除外)中可以正常工作。

我很难在 Chrome 中垂直对齐任何内容，但在其他所有内容中都能正常工作。有什么想法吗？

此外，有谁知道我可以动态地将 div 拉伸(stretch)到 div 类内容的一定百分比的方法，这也可以在 chrome 中使用？

提前致谢。请参阅底部的演示和屏幕截图。

HTML

<div class="container">
  <div class="content">
    <h2>Ticket System <span style="color:#339933; font-weight:bold;">Open</span> Customer Ticket List</h2>
    <a class="BlueButton" href="ticket_view_cust_ticket.php">Open Customer Tickets</a>
    <a class="BlueButton" href="ticket_view_cust_ticket_rejected.php">Rejected Customer Tickets</a>
    <div class="centerContent">
      There are currently no open customer tickets
    </div>
  </div>
</div>

CSS

html,body
{
    height: 100vh;
}

body
{
   display: table; 
   margin: 0 auto;
   font-family: Tahoma,Arial,Sans-Serif;
}

.container
{  
  height: 98vh;
  vertical-align: middle;
    width: 70vw;
    min-width:1024px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
}

.content
{
    background-color: #ff0000;
    flex: auto;
    webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-shrink: 0;
    -o-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    padding-top:20px;
    min-height:600px;
}

.centerContent
{
    height: 95%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

演示 - https://jsfiddle.net/qr2tpgo6/1/

容器截图- http://prntscr.com/azp8bk

Firefox - http://prntscr.com/azp4oj

Chrome - http://prntscr.com/azp4hy

Answer 1

您的容器缺少 display: flex，因此 flex 属性不起作用。

添加这个:

.content
{
    background-color: #ff0000;
    flex: auto;
    flex-direction: column;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    padding-top:20px;
    min-height:600px;

    display: flex;             /* new; establish flex container */
    justify-content: center;   /* new; center children vertically */
}

Revised Fiddle