仅使用CSS在移动设备上水平和垂直显示div中心

任务是在其他块的水平和垂直中心显示块。我用this code 仅使用CSS在移动设备上水平和垂直显示div中心

<div class="parent"> 
    <div class="child"></div> 
</div>

.parent { 
    background-color: #AFAFAF; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 0; 
    width: 100%; 
} 

.child { 
    background-color: #FF0000; 
    bottom: 0; 
    height: 200px; 
    left: 0; 
    margin: auto; 
    position: fixed; 
    right: 0; 
    top: 0; 
    width: 200px; 
}

，并在浏览器和iOS设备的伟大工程，但是这是在Android移动设备（不片剂）的情况下：内的div被钉在左上角但是当我使用Adobe Edge Inspect检查元素时，我发现这个内部div的突出显示的区域显示正确。如何以Android移动为中心解决此问题？内部块的大小将会改变，所以应该是通用的。

来源

2014-01-08 Amazzzonka

标记最简单的方法是{left:50%;margin-left:-100px;}。

然后与高度相同。 {top:50%;margin-top:-100px;}

总结：

.child { 
    background-color: #FF0000; 
    height: 200px; 
    left: 50%; 
    position: fixed; 
    top: 50%; 
    width: 200px; 
    margin: -100px 0 0 -100px; 
}

来源

2014-01-08 14:42:28 trgraglia

是的，这是最简单的方法，但正如我在孩子的宽度和高度会改变之前写的一样。 – Amazzzonka

它在哪里变化？更新尺寸时更新边距。我这样说是因为你已经设置了高度和宽度，所以你必须将它设置在某个地方。 – trgraglia

我用来对准DIV水平和verticaly你正在做的方式，但它似乎像这个技术是不是真的跨浏览器。相反，我看了一下Facebook的做法。

The demo on JsFiddle

的HTML：

<table> 
    <tr> 
     <td><div class="square">Some text</div></td> 
    </tr> 
</table>

的CSS：

html, body { 
    height: 100%; 
    width: 100%; 
} 

table { 
    margin: 0px auto; 
    height: 100%; 
} 

.square { 
    width: 150px; 
    height: 150px; 
    background-color: red; 
}

注：最近，我接过来一看，它似乎像Facebook改变了他们做到这一点。他们仍然使用表格显示属性，但没有更多的表格，tr和td标签（代替div）。

来源

2014-01-08 15:00:33 Gabin

谢谢，但它不是语义和位置：固定;我的情况很重要。 – Amazzzonka

仅使用CSS在移动设备上水平和垂直显示div中心

回答

相关问题