vertically align content within Chrome

Question

I got a situation where flex box is not working the way I want it to within Chrome but it works in other browsers (apart from iOS mobile devices).

I am struggling to vertically align any content within Chrome but works in everything else. Any ideas?

Also, does anyone know a way I can dynamically stretch a div to a certain % of the div class content which will also work within chrome?

Thanks in advance. See the bottom for demo and 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

instead of vertical align , use align-items : center; and see if that works — Dhaval Chheda, May 03 '16 at 09:23
align-items : center; has not impact. Infact it just screwed the layout. Also @Epodax good spot. I usually post PHP questions, force of habit! — Ryan, May 03 '16 at 09:38

score 1 · Accepted Answer · answered May 03 '16 at 15:00

1

Your container is missing display: flex, so flex properties aren't working.

Add this:

.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

answered May 03 '16 at 15:00

Michael Benjamin

346,931
104
581
701

That does work however it doesn't give me much control as .container is used throughout thats why I was hoping to use a seperate div to control the vertical alignment. – Ryan May 03 '16 at 15:32
1

You can use nested flex containers (on flex items) to vertically and horizontally center child elements. Every parent / child can be centered this way. This may help: http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin May 15 '16 at 17:16

vertically align content within Chrome

1 Answers1