Safari 中的垂直居中

Posted 2023-03-06

【中文标题】Safari 中的垂直居中

【英文标题】：Vertical centering in Safari

【发布时间】：2014-05-29 22:06:12

【问题描述】：

我在 Safari 中遇到垂直居中问题，使用 margin: auto 0;在一个嵌套在一个 div 内的 div 上，显示：inline-flex;

它在 Firefox、Chrome、Opera 中运行良好......但在 Safari 中失败（以及在默认的 android 浏览器上，但我正在考虑为此以及任何 iPad 使用单独的 CSS）

这是代码（我正在使用 Bootstrap，顺便说一句）： http://jsfiddle.net/n2V5q/1/

<div class="container-fluid head" id="slide1">
    <div class="col-md-6 logo">
        <img src="img/logo.png"  />
    </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;

【参考方案1】：

在你的头部课程中尝试一下

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

【讨论】：

非常感谢，成功了！