如何將所有內容放到頁面的中心？

Question

我在.wrapper類中添加了margin:0 auto;以便將所有內容集中到一起。我有幾個問題：

1. 是否margin:0 auto;足以使內容居中？
2. 如何在我的情況下解決居中問題？

這是我的style.css文件。

*{ 
    margin: 0; 
    padding: 0; 
    outline: 0 
} 
body { 
    font-size: 15px; 
    line-height: 25px; 
    font-family: arial 
} 
.wrapper { 
    width: 960px; 
    margin: 0 auto; 
} 
.form_area {} 

，這是我的index.html文件。

<div class="wrapper"> 
    <div class="header"> 
    <ul> 
     <li><a href="">Hello</a> 
     </li> 
     <li><a href="">Hello</a> 
     </li> 
     <li><a href="">Hello</a> 
     </li> 
     <li><a href="">Hello</a> 
     </li> 
    </ul> 
    </div> 
    <div class="form_area"> 
    <form action="" method="POST"> 
     <table> 
     <tr> 
      <td>First Number :</td> 
      <td> 
      <input type="number" name="numOne" placeholder="Input Your First Number"> 
      </td> 
     </tr> 
     <tr> 
      <td>Second Number :</td> 
      <td> 
      <input type="number" name="numTwo" placeholder="Input Your Second Number"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <input type="reset" name="reset" value="Reset"> 
      </td> 
      <td> 
      <input type="submit" name="submit" value="Calculate"> 
      </td> 
     </tr> 
     </table> 
    </form> 
    </div> 
</div> 

工作DEMO

Answer 1

幾點考慮..

1. 要中心.wrapper的寬度必須小於.container。爲了看到一個明顯的差異。在你的例子中，包裝的寬度很寬，不能是「居中」！嘗試將寬度設置爲較小的值，例如400px。

2. 您想「居中」的內容也很重要。如果你想

   1. 要居中文本，然後只使用text-align:center;屬性。
   2. 要將每個元素居中，請將它們作爲display作爲inline-block，然後設置父級的text-align:center;屬性。
3. 如果您已經申請float到你希望中心.wrapper或任何元素，然後margin: 0 auto;不會工作。因爲float會干擾文檔的正常流動並將元素拉出正常流。

根據您的意見。

剛纔介紹另一個div可以說.centered裏面的.wrapper和包含的內容爲中心。併爲其分配較小的width並設置margin: 0 auto;。它應該以.wrapper爲中心。 JSFiddle

Answer 2

這是好的，但也許你的屏幕分辨率是小，寬度更改爲一個較小的值，看看它

.wrapper {width:300px; margin:0px auto;} <!-- demo width--> 

Answer 3

body { width: 100%; height: 100%; margin: 0px; padding: 0px; } 
.wrapper 
{ 
    margin: 0 auto; 
    width: 20%; 
    position: absolute; 
    top: 25%; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

，或者使用下面的代碼

.wrapper 
{ 
    text-align: center; 
} 
.centered{ 
    display: inline-block; 
    vertical-align: top; 
} 

如果你的html是這樣的：

<div class="wrapper"> 
    <div class="centered"> 
     ...... 
     your content 
     ...... 
    </div> 
</div>