在頁面中間調整頁面中間div的大小頁面

我正在嘗試讓div在頁面中間居中。我將它置於中間位置，但當我調整頁面大小時遇到問題。當我將窗口的寬度設置的儘可能小時，div就會離開頁面的左側。下面是一個的jsfiddle代表我有什麼：在頁面中間調整頁面中間div的大小頁面

下面是一些CSS：

.wrapper{ 
    top: 50%; 
    left: 50%; 
    width:200px; 
    height:60px; 
    margin-top: -30px; /*set to a negative number 1/2 of your height*/ 
    margin-left: -100px; /*set to a negative number 1/2 of your width*/ 
    border: 1px solid #ccc; 
    position:fixed; 
}

現在，如果你看那個和調整窗口的大小，使之小，你可以在寬度，你可以看到div離開了。我如何讓它停在頁面的邊緣？我找不到使用margin auto的方法。有什麼建議麼？

來源

2015-12-11 user081608

哪些是你使用，因爲它似乎很好地工作在這裏的瀏覽器。我正在使用Firefox。 –

它在我的工作正常。我沒有看到錯誤.. –

我正在使用鉻。 – user081608

刪除：

margin-left: -100px; 
margin-top: -30px;

並申請transform: translate(-50%);到wrapper類。

-webkit-transform: translate(-50%);像Chrome瀏覽器的瀏覽器。

Updated Fiddle

來源

2015-12-11 05:18:21 ketan

當我這樣做時，我仍然通過屏幕的左側。我希望它一旦撞到屏幕的左側就停下來。對不起，如果我不清楚。我在兩臺不同的顯示器上嘗試了firefox和chrome，但沒有奏效。 – user081608

將Chrome瀏覽器應用於Chrome瀏覽器。檢查小提琴 – ketan

這也沒有工作。也許有什麼是我錯了。所以如果你在該div中添加了一個長字符串，沒有人會因爲它左移過屏幕大小而被切斷？ – user081608

你要設置一些CSS屬性。 margin: auto; width: ;將寬度設置爲所需的寬度/百分比。它會自動使左側和右側的邊距相同。

來源

2015-12-11 05:29:59

是的我之前嘗試過，但是當您有類似於開發者面板彈出的頁面底部時，它會上下移動。即使面板彈出，我也希望它保持固定。 – user081608

@ user081608不知道是否有辦法，但我添加了一個Css屬性到我的背景中，即使在滾動時也保持它的位置不變。背景附件：固定; –

所以我想你要麼this push-to-right-instead solution或this resize-instead solution。

兩者都涉及到包裝容器內的實際元素：

<div class="container"> 
    <div class="wrapper"> 

    </div> 
</div>

而且使用文本對齊水平居中：

.container{ 
    top: 50%; 
    left: 0; 
    right: 0; 
    margin-top: -30px; 
    position:fixed; 
    text-align: center; 
} 
.wrapper{ 
    ... 
    display: inline-block; 
}

來源

2015-12-11 05:52:42 AVAVT

在頁面中間調整頁面中間div的大小頁面

回答

相關問題