我如何居中一個div類？

Question

我無法集中div類。我想讓div類在頁面中居中，因爲當我滾動時它卡在左邊。我已經嘗試將它的中心浮動，什麼也沒做，只是一個業餘愛好者，所以不知道還有什麼要嘗試。

HTML

<div class = "container"> 
    <ul> 
     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li><br> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li><br> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 

     <li class = "image"> 
     <img src = "BlackBox.jpg" height="200px"> 
     </li> 


    </ul> 
</div> 

CSS

.image { 
display: inline; 
padding: 0 10px 10px 10px; 
} 

.container { 
width: 700px; 
} 

Answer 1

試試這個代碼

.container{ 
    width: 700px; 
    margin: 0 auto; 
    } 

參見演示http://jsfiddle.net/JentiDabhi/4q9j40m1/

Answer 2

試試這個：

.container { 
    width: 700px; 
    margin-left: auto; 
    margin-right: auto; 
} 

Answer 3

這是因爲你的容器寬度。

更換容器width:500px或任何其他看到的結果。

您可以使用align-self屬性將您的div居中。

.container { 
     width: 500px; 
     align-self: center; 
     -webkit-align-self: center; 
} 

檢查Fiddle.

Answer 4

有多種方式來中心，你知道的東西。水平中心是一回事，垂直中心是另一回事。

對於水平居中的東西很容易。

1：給身體的固定寬度，然後margin: 0 auto;

.parent { 
    width: 800px; 
    margin: 0 auto; 
} 

/* for block level */ 
.parent { 
    text-align: center; 
} 

/* for inline, inline-block */ 
.parent { 
    position: relative; 
} 

.child { 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

對於垂直定心 1：設置line-height爲某個值比字體大小更大，

.child { 
    font-size: 12px; 
    line-height: 24px; 
} 
/* downside, works for single line text */ 

爲圖像

.parent { 
    line-height: 200px; /* greater than image size */ 
} 

.child img { 
    vertical-align: middle; 
} 

2：表Wa ÿ

.parent { 
    display: table; 
} 

.child { 
    display: table-cell; 
    vertical-align: middle; 
} 
/* this is equivalent to valign = middle from <table></table> days */ 

3：定位

.parent: { 
    position: relative; 
} 

.child: { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    /* brings the top left corner to center */ 
    height: 30%; 
    width: 50%; 
    margin: -15% 0 0 -25%; 
    /* set the top and left margins to half the height and width */ 
} 

4：等於頂部和底部填充

.parent { 
    padding: 5% 0; 
} 
.child { 
    padding: 10% 0; 
} 

有一些提到here，check'em出來。