Center Alignment in Safari

Question

I have a problem with vertical centering in Safari using margin: auto 0; on a div that is nested in a display div: inline-flex;

It works fine in Firefox, Chrome, Opera ... but it doesn’t work in Safari (and the default Android browser, but I’m considering using separate CSS for this and any iPads)

Here's the code (I am using Bootstrap, btw): http://jsfiddle.net/n2V5q/1/

<div class="container-fluid head" id="slide1"> <div class="col-md-6 logo"> <img src="img/logo.png" alt="THE LOGO" /> </div> </div> 

and

  .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .head { color: #fff; width: 100%; min-height: 100rem; /* for Opera */ min-height: 100vh; padding: 15px; background-color: rgba(85,61,148,.9); box-shadow: 0px 0px 6px #000000; z-index: 90; position: relative; background-image: url('../img/dither2.png'); background-position: center bottom; background-repeat: repeat-x; display: -o-flex; display: -ms-flex; display: -moz-flex; display: -webkit-flex; display: inline-flex; } .col-md-6 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .logo { margin: auto 0; text-align: center; } 

Answer 1

try in the main class

  display: -webkit-inline-box; -webkit-box-pack: center; -webkit-box-align: center;