vertikal Ausrichtung von Inhalten innerhalb von Chrome

Question

Ich habe eine Situation, in der Flex-Box funktioniert nicht so, wie ich es in Chrome wollen, aber es funktioniert in anderen Browsern (abgesehen von iOS-Mobilgeräten).

Ich habe Probleme, alle Inhalte in Chrome vertikal auszurichten, funktioniert aber in allem anderen. Irgendwelche Ideen?

Kennt jemand auch eine Weise, die ich ein div zu einem bestimmten Prozentsatz des div Klasseninhaltes dynamisch ausdehnen kann, der auch in Chrom funktioniert?

Vielen Dank im Voraus. Siehe unten für Demo und Screenshots.

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; 
} 

Demo -https://jsfiddle.net/qr2tpgo6/1/

Container Screenshot -http://prntscr.com/azp8bk

Firefox -http://prntscr.com/azp4oj

Chrome -http://prntscr.com/azp4hy

Answer 1

Ihr Behälter fehlt display: flex, so flex Eigenschaften funktionieren nicht.

Fügen Sie diese:

.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