在Safari中我有垂直居中的问题,使用margin:auto 0;在div上嵌入div的div:inline-flex;
它在Firefox,Chrome,Opera中运行得很好……但是在Safari中失败了(在默认的Android浏览器上,但我正在考虑使用单独的CSS以及iPad使用的任何内容)
这是代码(我使用的是Bootstrap,顺便说一下):
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>
和
.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; }