请使用下面的代码，您的div将在中心。

.class-name {
    display:block;
    margin:0 auto;
}

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

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

如果旧浏览器不是问题，可以使用HTML5 / CSS3。如果他们是，应用腻子，仍然使用HTML5 / CSS3。我假设您的div在这里没有边距或填充，但它们相对容易解释。下面是代码。

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

它的作用是:

定位div相对于它的容器; 将div的左边界水平放置在其容器宽度的50%; 水平向后平移div自身宽度的50%。

很容易想象这个确认div最终将水平居中的过程。作为奖励，你可以垂直居中，没有额外的成本:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这种方法的优点是您不必做任何违反直觉的事情，例如将div视为某种文本，将其包装在一个(通常在语义上无用)额外的容器中，或者赋予它一个固定的宽度，这并不总是可能的。

如果需要，不要忘记转换的供应商前缀。

在你的html文件中，你写:

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

你写的CSS文件:

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

对我有用。

请使用下面的代码，您的div将在中心。

.class-name {
    display:block;
    margin:0 auto;
}

问题的标题和内容实际上是不同的，所以我将发布两个解决方案，使用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>