Question

我已成功将div放在另一个div的中心，但它在Safari浏览器中不起作用。

#box{
    width: 100%;	
    height: 100%;
    position: relative;
}
    
#inner_box {
    margin: 0;    
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

<div id="box">
    <div id="inner_box"></div>
</div>

Answer 1

Safari（仍然）需要-webkit-的{{1}}前缀：

transform

Answer 2

你可以在没有位置的情况下尝试这个：

#box{
 width: 100%;    
 height: 100%;
 position: relative;
text-align:center;
}

#inner_box {
  display:inline-block;
}

Answer 3

此处不需要

margin-right: -50%; ... #box div的高度和宽度已经是100％。

您已经将＃inner-box与顶部和左侧定位对齐。然后转换样式将其与#box的中心对齐。

#box{
    position: relative;
    }

    #inner_box {
        margin: 0;    
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }

Safari不会在另一个div的中心显示div

3 个答案: