Question

可能重复：
How to center DIV in DIV?

听起来很简单但无法理解：

如何将页面上固定宽度的div居中？

默认情况下，它会向左移动。

halign已被弃用，但我可以找到替代品。

[更新]

width:800px;left-margin:auto;right-margin:auto:

效果很好。

有没有办法在不设置固定宽度的情况下执行此操作？

Answer 1

试试这个：

<style>
.centered {
margin-left:auto;
margin-right:auto;
}
</style>

<div class="centered">
Some text
</div>

Answer 2

<div style="margin:0 auto">content here</div>

Answer 3

默认情况下，div是页面的整个宽度。您可以通过将div的css设置为：

来居中内容

.mydiv
{
    text-align: center;
}

OR

你可以通过这样做来使div本身居中：

.mydiv
{
    display: inline-block; /* make it be only as wide as its contents */
    margin: auto; /* centering magic by making the margins equal and maximum */
}

Answer 4

您可以将任何不跨越整个页面的div居中。说你的div是

.div {
width: 80%;
margin: 0 auto;
}

然后它会正常工作。正如Evan所说：“显示：内联块;”将使div与其内容一样宽，这也适用于“margin：0 auto;”。

Answer 5

div {
  margin-left: auto;
  margin-right: auto;
}

Answer 6

margin:auto;我应该这样做吗？

Answer 7

只要您声明了适当的doctype，就可以像在页面上居中一样简单：

#someDiv {
    width: 624px;
    margin-left: auto;
    margin-right: auto;
}

如果您正在使用IE并且没有声明doctype（您正在以怪癖模式运行），这将无效。修复方法是在页面中添加适当的doctype声明。您可以在此处找到适当的声明：

W3C QA - Recommended list of Doctype declarations you can use in your Web document

Answer 8

通常有两种做法（我见过）。一个具有margin属性，另一个具有定位和left:50%

http://jsfiddle.net/NvaEE/

<br>
<div class="first"> I have a fixe dwidth</div>
<br>
<div class="second"> I have a fixe dwidth</div>

div{width:200px; background:#ddd;}

div.first{margin:0 auto;}
div.second{position:absolute;left:50%;margin-left:-100px}

Answer 9

将它包装在横跨页面宽度的容器div中，并将该容器分配给

text-align: center;

css属性。

还有其他方法，例如管理边距和宽度。在大多数情况下，您可以使用text-align。

我如何将div居中？

9 个答案: