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，如果它有一个，则为父级。

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">

（在这种情况下是身体）。