如果你知道你的div的宽度并且它是固定的，你可以使用下面的css:

margin-left: calc(50% - 'half-of-your-div-width');

'half-of-your-div-width'显然应该是div宽度的一半。

在非固定宽度的div的情况下(即你不知道div将占用多少空间)。

#包装{ 背景颜色:绿色;/*用于可视化*/ text-align:中心; ｝ # yourdiv { 背景颜色:红色;/*用于可视化*/ 显示:inline-block; ｝ < div id = "包装" > <div id="yourdiv">你的文本</div> < / div >

请记住，#yourdiv的宽度是动态的->它将增长和缩小以适应其中的文本。

您可以在Caniuse上检查浏览器兼容性

在大多数浏览器，这将工作:

div.centre { 宽度:200 px; 显示:块; background - color: # eee; margin-left:汽车; margin-right:汽车; ｝ <div class=" center ">一些文本</div>

在IE6中，你需要添加另一个外部div:

div.layout { text-align:中心; ｝ div.centre { text-align:左; 宽度:200 px; background - color: # eee; 显示:块; margin-left:汽车; margin-right:汽车; ｝ < div class = "布局”> <div class=" center ">一些文本</div> < / div >

在你的html文件中，你写:

<div class="banner">
  Center content
</div>

你写的CSS文件:

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

对我有用。

问题的标题和内容实际上是不同的，所以我将发布两个解决方案，使用Flexbox。

我猜在IE8和IE9完全被摧毁之前，Flexbox将取代/添加到当前的标准解决方案中;)

检查当前flexbox的浏览器兼容性表

单一的元素

.container { 显示:flex; justify-content:中心; ｝ < div class = "容器" > < img src = " http://placehold.it/100x100 " > < / div >

多个元素，但只以一个为中心

默认行为是flex-direction: row，将所有子项对齐在一行中。将其设置为flex-direction: column将有助于堆叠的行。

.container { display: flex; flex-direction: column; } .centered { align-self: center; } <div class="container"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <div class="centered"><img src="http://placehold.it/100x100"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </div>

margin-left:auto和margin-right:auto的用法在某些情况下可能不起作用。这里有一个解决方案，它总是有效的。您指定一个所需的宽度，然后将左距设置为剩余宽度的一半。

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>