如何将 div 元素浮动到中心位置？

Question

我想让一个div居中在网页的中央，但无法实现。我尝试了在css中使用float: center;，但似乎不起作用。

- Eli Reznekervitz

---

这些东西对于帮助没有任何作用。 - Jordan

Answer 1

在 CSS 中不存在 float: center; ，应该使用 margin: 0 auto;，就像这样：

.mydivclass {
    margin: 0 auto;
 }

- Drew Bartlett

---

类名 wrapper 可能会让人感到困惑。已编辑。 - user142019

请注意，您必须设置宽度！ - user142019

你还需要移除浮点数。 - newman

Answer 2

你可以像这样内联实现

<div style="margin:0px auto"></div>

或者你可以通过类来实现

<div class="x"><div>

在你的CSS文件或者在<style></style>之间添加以下代码：.x{margin:0px auto} 或者你可以直接使用<center>标签。

  <center>
    <div></div>
  </center>

或者如果你正在使用绝对定位，可以这样做：

.x{
   width: 140px;
   position: absolute;
   top: 0px;
   left: 50%;
   margin-left: -70px; /*half the size of width*/
}

- Hussein

---

请不要提及CENTER标签，该标签已被弃用超过10年。 - Šime Vidas

@Šime 你知道吗，Google仍然使用它和字体标签。查看Google页面的源代码，你就会看到。 - Hussein

@sime，这不是重点，Google作为全球排名第一的网站足以证明它的实力。 - Hussein

@alex说，谷歌主页被精心设计以尽可能少的字节数呈现；当然，自问世以来它变得更加复杂了。原因是他们的主页每秒钟被浏览亿万次，即使1个字节的代码大小减少也会在带宽上累积。尽管如此，我完全同意@Šime的观点-你不应该在这里推荐使用<center>标签-这只是错误的建议，简单明了-首先它破坏了HTML（用于内容）和CSS（用于布局）之间的分离。你应该将其从你的答案中删除。 - thirtydot

@alex：教授“过时的、不好的做法”确实会带来伤害。你回答中有部分内容涉及到了这一点，因此你应该删除那部分内容。这就是我想说的。 - thirtydot

Answer 3

如果某些原因导致 div 元素的定位方式为绝对定位，请执行以下操作：

<div class="something"></div>

.something {
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
}

- SimeriaIonut

Answer 4

尝试使用“margin:0 auto”样式，div需要固定宽度。

- Elbert Alias

Answer 5

如果你正在使用width和height，你应该尝试使用margin-right: 45%;...这对我来说是100%有效的...所以我可以使用百分比将它带到任何地方！

- Stanley Amos

Answer 6

标签添加CSS宽度属性（以百分比或像素为单位），使用margin属性进行居中。

HTML

<div id="my-main-div"></div>

CSS

#my-main-div { margin: 0 auto; }

祝您愉快 :)

- iAnuj

Answer 7

简单解决方案：

<style>
.center {
    margin: auto;

}
</style>

<div class="center">
    <p> somthing goes here </p>
</div>

在线尝试

- Indra