居中嵌入塊

Question

我一直在整夜研究中心兩個嵌入塊，但我似乎無法做到。框架令人難以置信地偏移了頁面，或者只是停留在左側。我試着將文本居中（這會將所有內容居中），並通過CSS設置左邊距左邊的&。找不到一個好的解決方案。 「盒子」類的div需要居中，其中有兩個。

我的代碼是在這JSFiddle，任何幫助表示讚賞。

div#signin-reg { 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
} 
div.box { 
    padding: 2.5px; 
    float: middle; 
    vertical-align: top; 
    display: inline-block; 
    margin-top: 5px; 
    background-color: #ffffff; 
    font-size: 10px; 
    width: 230px; 
    box-shadow: 0px 0px 5px #dfdfdf; 
    -webkit-box-shadow: 0px 0px 5px #dfdfdf; 
    border-radius: 5px; 
} 

這是它看起來像現在 我希望它看起來像（粗糙，只是編輯在預覽）

Answer 1

http://jsfiddle.net/x872fb38/6/

div#signin-reg { 
    margin-left: auto; 
    margin-right: auto; 
    position: absolute; 
    text-align: center; 
} 

    div.box { 
     padding: 2.5px; 
     float: middle; 
     vertical-align: top; 
     display: inline-block; 
     margin-top: 5px; 
     background-color: #ffffff; 
     font-size: 10px; 
     width: 230px; 
     box-shadow: 0px 0px 5px #dfdfdf; 
     -webkit-box-shadow: 0px 0px 5px #dfdfdf; 
     border-radius: 5px; 
     text-align: left; 
    } 

Answer 2

從#signin-regposition:absolute刪除什麼。設置寬度爲.box + .box並添加margin: 0 auto。

width: 475px; margin: 0 auto;

http://jsfiddle.net/x872fb38/3/

我用它打了一下，設法它像截圖編碼。 這裏是演示。

http://jsfiddle.net/x872fb38/5/

雖然我有一些事情我想說。如果我是你，我會使用twitter bootstrap。 使用這個框架你想要實現的是非常容易的&在互聯網上有很多例子。

但是，如果你想自己的代碼，或使用框架將是一個矯枉過正，這裏是我的方法：

我將設置爲.box - float: left並會刪除display: inline-block;這將調整他們彼此相鄰的只要有空間。在這裏，我們用較低的分辨率解決問題（「響應性」）。如果文檔的寬度小於兩個.box所需的水平對齊寬度，那麼其中一個將會在下面。這要求父元素以百分比形式設置width。

無論如何，如果你不是那麼自命不凡，上面的演示將會訣竅。 :)

Answer 3

剛從div#signin-reg

div#signin-reg { 
    margin-left: auto; 
    margin-right: auto; 
} 

DEMO

Answer 4

其他的答案都OK刪除positon:absolute，

但是，如果由於某種特殊原因，需要絕對定位，
你可以這樣做：

div#signin-reg { 
    left: 50%; 
    transform: translateX(-50%); 
    position: absolute; 
}