如何僅將div水平居中？

Question

我想知道什么是僅將div水平居中的最佳方法，基本上，高度與寬度無關緊要。 我已經看到了很多示例，但是它們都集中在水平和垂直方向上，我不需要也不用。

所以可以說我有這個：

<body>
<div id="layout">
    Content of my site here.
</div>
</body>

Answer 1

垂直：

對於垂直行業，必須使用類似以下內容的內容：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

只需使用：

ul {
list-style: none;
margin: 0;
padding: 0;
}

這將刪除填充邊距和列表樣式。 您將獲得一個垂直列表。 現在將其放置在您想要的位置！

水平：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

現在為此，CSS中只有一行：

ul li {
display: inline; // this is used to place elements in one line..
}

其他都一樣！

這就是全部！ 現在，您可以將此列表放在div中。 它將起作用！

要定位它，您可以使用position: absolute來實現，為此您將需要使用position: relative作為父div。 或者，您可以使用padding:或margin 。 這就是您所需要的！

Answer 2

#layout {
    margin: 0 auto;
    position: relative;
}

這樣會將#layout相對於窗口水平居中#layout ，如果有，則為父窗口。

Answer 3

它將垂直居中

  #layout{position:absolute;top:50%;margin-top:-heightofDiv/2;}

Answer 4

最合適的方法是使用

margin-top:
margin-bottom:

padding-top:
padding-bottom:

在邊距和填充之間選擇什么取決於您的布局。 在代碼中，您可以選擇應用於

 <div id="layout">

否則，您可以設置容器的填充

 <div id="layout">

（在這種情況下為主體）。