如何轻松地使用CSS水平对<div>进行居中？

Question

如何轻松地使用CSS水平对<div>进行居中？

我正试着把一个<div>块元素，并将其设置为最小宽度。做这件事最简单的方法是什么？我想要<div>元素与页的其余部分保持内联。我想举个例子：

page text page text page text page text

page text page text page text page text

               -------

               | div |

               -------

page text page text page text page text

page text page text page text page text

Answer 1

如属非固定宽度div(即您不知道div将占用多少空间)。#wrapper {&nbsp; background-color: green; /* for visualization purposes */&nbsp; text-align: center;}#yourdiv {&nbsp; background-color: red; /* for visualization purposes */&nbsp; display: inline-block;}<div id="wrapper">&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <div id="yourdiv">Your text</div></div>请记住#yourdiv是动态的->它将增长和缩小，以适应其中的文本。您可以检查浏览器的兼容性。卡尼乌斯

Answer 2

在大多数浏览器中，这将起作用：div.centre {&nbsp; width: 200px;&nbsp; display: block;&nbsp; background-color: #eee;&nbsp; margin-left: auto;&nbsp; margin-right: auto;}<div class="centre">Some Text</div>在IE6中，您需要添加另一个外部div:div.layout {&nbsp; text-align: center;}div.centre {&nbsp; text-align: left;&nbsp; width: 200px;&nbsp; background-color: #eee;&nbsp; display: block;&nbsp; margin-left: auto;&nbsp; margin-right: auto;}<div class="layout">&nbsp; <div class="centre">Some Text</div></div>

Answer 3

margin:&nbsp;0&nbsp;auto;如洛克说过,&nbsp;最小宽度并不是所有浏览器都支持。