在 Chrome 中垂直对齐内容

Question

我遇到了这样一种情况，即 flex 框在 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

火狐 - 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