中心對齊從桌面到手機

我使用以下代碼來居中我的div並將文本居中在我的div中。這適用於我的桌面瀏覽器，但在ipad和iphones間隔不好。中心對齊從桌面到手機

的jsfiddle：https://jsfiddle.net/ps7t1rnu/

CSS

.center-box { 
    position: absolute; 
    background: #ccc; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 75%; 
    height: 75%; 
    padding: 20px; 
    text-align: center; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); 
    border-radius: 25px; 
} 
.cb-text-center { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
}

HTML

<div class="center-box"> 
    <div class="cb-text-center"> FOOBAR 
     BAR BAR 
    </div> 
</div>

DIV的正確中心（如可見的jsfiddle上的瀏覽器 - 而在iPhone或iPad上它從移開屏幕有一些奇怪的間距..

顯示ima GE：

你可以看到問題，當你在看的jsfiddle全屏結果 - https://jsfiddle.net/ps7t1rnu/embedded/result/在瀏覽器和iPad/iPhone的。

感謝您的幫助..

來源

2015-09-06 hypermails

你''在你的文檔''節？ – connexo

另外，基於Webkit的瀏覽器可能需要在前綴「transform」。 – connexo

iOS的Safari瀏覽器，直到和包括iOS 8.4，以及Android瀏覽器直到和包括Android 4.4需要前綴的transform財產。

-webkit-transform: translate(-50%, -50%);

http://caniuse.com/#search=transform

來源

2015-09-06 06:11:10 connexo

謝謝 - 這是愚蠢的不考慮跨瀏覽器標籤.. – hypermails

試試這個

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; width=device-width;">

來源

2015-09-06 06:13:29

中心對齊從桌面到手機

回答

相關問題