CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >

您的图表还显示了块级元素(通常是div)，而不是内联元素。

在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。

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

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

'half-of-your-div-width'显然应该是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视为某种文本，将其包装在一个(通常在语义上无用)额外的容器中，或者赋予它一个固定的宽度，这并不总是可能的。

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

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

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

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

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

.center {
   margin-left: auto;
   margin-right: auto;
}

最小宽度不是全局支持的，但是可以使用

.divclass {
   min-width: 200px;
}

然后可以将div设置为

<div class="center divclass">stuff in here</div>

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

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

    #child {
        display: inline-block;
    }