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

使用jQuery:

$(document).ready(function() {
    $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
    $(".myElement_container_new").css({// for IE6
        "display" : "block",
        "position" : "relative",
        "margin" : "0",
        "padding" : "0",
        "border" : "none",
        "background-color" : "transparent",
        "clear" : "both",
        "text-align" : "center"
    });
    $(".myElement").css({
        "display" : "block",
        "position" : "relative",
        "max-width" : "75%", // for example
        "margin-left" : "auto",
        "margin-right" : "auto",
        "clear" : "both",
        "text-align" : "left"
    });
});

或者，如果你想用".myElement"类居中每个元素:

$(document).ready(function() {
    $(".myElement").each(function() {
        $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
        $(".myElement_container_new").css({// for IE6
            "display" : "block",
            "position" : "relative",
            "margin" : "0",
            "padding" : "0",
            "border" : "none",
            "background-color" : "transparent",
            "clear" : "both",
            "text-align" : "center"
        });
        $(this).css({
            "display" : "block",
            "position" : "relative",
            "max-width" : "75%",
            "margin-left" : "auto",
            "margin-right" : "auto",
            "clear" : "both",
            "text-align" : "left"
        });
    });
});

你可以使用位置:相对;然后设置左边和上面的值:

.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}

如果你的<div>有position: absolute你需要使用width: 100%;

#parent {
    width: 100%;
    text-align: center;
}

    #child {
        display: inline-block;
    }

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

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 >

对这个问题最好的回答是使用margin-auto，但要使用它，你必须知道你的div的宽度在px或%。

CSS代码:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}