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