僅使用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中心

回答

相關問題