如何仅将 div 水平居中？答案

【问题标题】：How to center a div horizontally only?如何仅将 div 水平居中？
【发布时间】：2013-09-11 02:05:57
【问题描述】：

我想知道仅将 div 水平居中的最佳方法是什么，基本上只考虑宽度的高度无关紧要。我见过很多例子，但它们都集中在水平和垂直方面，我不需要也不想。

假设我有这个：

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

【问题讨论】：

标签： html css

【解决方案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。这就是你所需要的！

【讨论】：

【解决方案2】：

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

这将使#layout 相对于窗口水平居中，或者它是父窗口（如果有的话）。

【讨论】：

【解决方案3】：

垂直居中

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

【讨论】：

【解决方案4】：

最合适的方法是使用任一

margin-top:
margin-bottom:

padding-top:
padding-bottom:

在边距和内边距之间选择什么取决于您的布局。在您的代码中，您可以选择应用于

的边距

 <div id="layout">

或者你可以设置容器的填充

 <div id="layout">

（本例中为主体）。

【讨论】：