边距自动 0 在 ipad Safari 上不起作用？答案

【问题标题】：margin auto 0 not working on ipad safari?边距自动 0 在 ipad Safari 上不起作用？
【发布时间】：2012-07-03 18:07:43
【问题描述】：

您好，我很难找到一种方法在 ipad 上的 safari 中将 div 居中...这适用于 ipad 上的 chrome 但 safari 不能以横向格式缩放...左右边距但我必须滚动整个事情。有什么想法可以在浏览器..chrome 和 safari 中使用它吗？

HTML：

<html>
        <head>
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    </head>  
    <body>
        <div id="wrapper">

            </div>

    </body>  
</html>

CSS：

#wrapper{
    margin: 0 auto;
    width:90%;
    height:90%;
    background-color: black;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

【问题讨论】：

标签： html ipad responsive-design

【解决方案1】：

这就是我会这样做的方式。这是example

HTML：

<div id="wrapper">
    <div class="outer">
        <div class="inner">
            <div class="content">

            </div>
        </div>                 
    </div>    
</div>

CSS：

#wrapper{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

.outer{
    display:table;
    table-layout:fixed;
    height:100%;
    width:100%;
}

.inner{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    width:100%;
    position:relative;
}

.content{
    width:90%;
    height:90%; 
    background:red;  
    display:inline-block;    
}

【讨论】：

你在你的 ipad 上试过了吗？...在我的情况下，我仍然有一个超大的盒子，所以我必须滚动到右边距...
我在 ipad safari 中使用jsfiddle.net/9PGhg/4/show 进行了尝试，它适用于横向和纵向。而且我很确定它也可以在 chrome 中使用
截屏并发送链接
我明白了...你是对的...jsfiddle.net/9PGhg/4/show 正在工作
Firefox 中存在 100% 高度错误。只要将内容添加到 div.content，您就会看到内容和框。

【解决方案2】：

如果您将width 定义为90%，则可以避免该问题，只需设置margin: 0 5%;

【讨论】：

抱歉编辑：出现黑框，但缩放和以前一样