html – Safari中的垂直居中

前端之家收集整理的这篇文章主要介绍了html – Safari中的垂直居中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在Safari中我有垂直居中的问题,使用margin:auto 0;在div上嵌入div的div:inline-flex;

它在Firefox,Chrome,Opera中运行得很好……但是在Safari中失败了(在默认的Android浏览器上,但我正在考虑使用单独的CSS以及iPad使用的任何内容)

这是代码(我使用的是Bootstrap,顺便说一下):
http://jsfiddle.net/n2V5q/1/

  1. <div class="container-fluid head" id="slide1">
  2. <div class="col-md-6 logo">
  3. <img src="img/logo.png" alt="THE logo" />
  4. </div>
  5. </div>

  1. .container-fluid {
  2. margin-right: auto;
  3. margin-left: auto;
  4. padding-left: 15px;
  5. padding-right: 15px;
  6. }
  7.  
  8. .head {
  9. color: #fff;
  10. width: 100%;
  11. min-height: 100rem; /* for Opera */
  12. min-height: 100vh;
  13. padding: 15px;
  14. background-color: rgba(85,61,148,.9);
  15. Box-shadow: 0px 0px 6px #000000;
  16. z-index: 90;
  17. position: relative;
  18. background-image: url('../img/dither2.png');
  19. background-position: center bottom;
  20. background-repeat: repeat-x;
  21. display: -o-flex;
  22. display: -ms-flex;
  23. display: -moz-flex;
  24. display: -webkit-flex;
  25. display: inline-flex;
  26. }
  27.  
  28. .col-md-6 {
  29. position: relative;
  30. min-height: 1px;
  31. padding-left: 15px;
  32. padding-right: 15px;
  33. }
  34.  
  35. .logo {
  36. margin: auto 0;
  37. text-align: center;
  38. }

解决方法

试试你的班级
  1. display: -webkit-inline-Box;
  2. -webkit-Box-pack: center;
  3. -webkit-Box-align: center;

猜你在找的HTML相关文章