CSS中心頁

Question

//遺憾的壞格式化，我是我的手機上......

當有人問如何中心的網頁，然後將反應是這樣的：

margin-left:50%; 
left:(-1/2 width); 

我在一個寬度爲1000px的網站上使用了這個代碼，所以它涉及到屏幕上，這個網站不適合。 現在，該網站集中在較小的屏幕上，左右均勻地傾斜。

因此，可以說，我們的屏幕爲600像素寬：

200px are left 
600px are on screen 
200px are right 

您可以向右滾動，但左邊的像素，不可達...

我怎麼能解決這個問題，以控制，如果屏幕較小，我的網站有多少會被拖到左側？ 這對於手機尤爲重要......

Answer 1

如果你擔心不同的屏幕尺寸，那麼我強烈建議使用媒體查詢，但這也是設置居中元素的有用方法。只需使用寬度%而不是設置的寬度，然後按margin: 0 auto;

看看小提琴的視覺幫助。 （如果這個答案完全不那麼適合你的需要，我會很樂意將其刪除）

div { 
    margin: 0 auto; 
    width: 80%; 
    height: 500px; 
    background: mediumSeaGreen; 
} 

JSFIDDLE

你最好的選擇（忽略它從我的投資組合的CSS。

.subMenu { 
    display: none; 
    float: none; 
    width: 100%; 
    background: rgba(254, 126, 1, 0.5); 
    border-bottom: 5px solid rgba(0, 0, 0, 0.6); 
    font-size: 20px; 
    padding-left: 60%; 
    position: relative; 
    left: 0; 
    top: 3.85em; 
    list-style-type: none; 
    padding: 1.5em 0; 
    margin: 0; 
    overflow: hidden; 
} 

@media only screen and (max-width: 680px) { 
.subMenu { 
    top: 4.9em; 
    font-size: 10px; 
    min-height: 100% !important; 
    padding: 0; 
    background: rgba(0, 0, 0, 0.5); 
    } 
} 

您還可以使用jQuery動態查找寬度。

var width = $('div').width(); 

$('div').text(width); 

Answer 2

你可以嘗試使用margin: auto

http://jsfiddle.net/56N9w/

正如你看到那裏，如果你使窗口太小的內容，以適應它就會向左對齊默認

Answer 3

使用此：

margin: 0 auto; 
width: 400px; 

替代：

margin: 0 auto; 
width: 50%; 

另一種選擇：

#outer-div { 
    margin: 0 auto; 
    width: 50%; 
} 

#inner div { 
    /* insert any CSS you want here */ 
} 

---

注1：使用margin: 0 auto，則需要另外定義的寬度也不會中心。

注意2：你應該真的把它放在另一個盒子裏，或者使頁面寬度爲100％（或者寬度大於盒子的寬度）。

注意3：不能垂直居中放置：自動自動。這根本行不通。水平和垂直方向

居中盒：見下面的解決這一

工作在jsbin：
http://jsbin.com/OSUViFi/1/

的代碼（與上述相同的jsbin）：

page.html

<div id="outer-container"> 
    <div id="inner-container"> 
     <div id="centered-box"> 
     </div> 
    </div> 
    </div> 

風格。CSS

#outer-container { 
    width: 100%; 
    height: 100%; 
    display: table; 
    position:absolute; 
    overflow: hidden; 
} 
#inner-container { 
    display: table-cell; 
    vertical-align: middle; 
} 
#centered-box { 
    margin: 0 auto; 
    height: 400px; 
    width: 400px; 
    background: #000; 
} 

---

特定於您的需求（不包括垂直對齊，它看起來像你不需要）：

jsbin例如：
http://jsbin.com/axEZOTo/2

代碼（與上面的jsbin相同）：

page.html中

<div id="container"> 
    <div id="centered-box"> 
    </div> 
</div> 

的style.css

#container { 
    width: 1000px; 
    margin: 0 auto; 
    height: 100%; 
    background: #999; 
} 
#centered-box { 
    max-width: 70%; 
    min-width: 200px; 
    height: 500px; 
    margin: 0 auto; 
    background: #000; 
} 

這裏，可以去最小的是200像素，這個數字可以更改爲您要允許的最小量盒子有。

---

注：

我終於想通了，你試圖在你的問題，這是措辭很差的說。

你只用600px作爲例子，但你真的只是想讓它成爲一個隨着屏幕尺寸而變化的流體佈局。