html - 在Chrome中垂直对齐内容

我遇到一种情况，即弹性框无法按我希望的方式在Chrome中运行，但在其他浏览器（iOS移动设备除外）中也可以使用。

我正在努力在Chrome中垂直对齐任何内容，但在其他所有内容中都可以使用。有任何想法吗？

另外，有人知道我可以将div动态拉伸到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

铬-http://prntscr.com/azp4hy

最佳答案

您的容器缺少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