我想在另一个div里面居中一个div。

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

这是我目前使用的CSS。

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }
    
    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

如您所见,我现在使用的方法取决于#innerDiv的宽度和高度。如果宽度/高度改变,我将不得不修改margin-top和margin-left值。是否有任何通用的解决方案,我可以使用中心的#innerDiv独立于它的大小?

我发现使用margin: auto可以水平对齐#innerDiv到中间。但是垂直排列呢?


当前回答

另一种实现水平和垂直居中的方法是:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(参考)

其他回答

使居中:使垂直和水平对齐:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

另一种方法是使用转换转换

外部Div必须将其位置设置为相对或固定,内部Div必须将其位置设置为绝对,顶部和左侧为50%,并应用transform: translate(-50%, -50%)。

div.cn { 位置:相对; 宽度:200 px; 身高:200 px; 背景:灰色; text-align:中心; } div.inner { 位置:绝对的; 上图:50%; 左:50%; 宽度:100 px; 身高:100 px; -webkit-transform (-50%, -50%); 转换:翻译(-50%,-50%); 背景:红色; } < div class = " cn”> < div class = "内部" > 测验 < / div > < / div >

测试:

Opera 24.0(最低12.1) Safari 5.1.7(最少4个带-webkit-前缀) Firefox 31.0(最低3.6带-moz前缀,最低16不带前缀) Chrome 36(最少11个带-webkit前缀,最少36个不带前缀) IE 11, 10(最小9个带-ms前缀,最小10个不带前缀) 更多浏览器,我可以使用吗?

如果你在看完上面给出的精彩答案后仍然不明白。

这里有两个简单的例子,告诉你如何实现它。

使用显示:表格单元格

.wrapper { 显示:表格单元; vertical-align:中间; text-align:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; } .container { 显示:inline-block; text-align:左; 填充:20 px; 边框:1px solid #cd0000; } < div class = "包装" > < div class = "容器" > 使用"<strong>display: table-cell</strong>"将div居中对齐 < / div > < / div >

使用flex-box(显示:flex)

.wrapper { 显示:flex; justify-content:中心; 宽度:400 px; 身高:300 px; 边框:1px实体#555; } .container { align-self:中心; 填充:20 px; 边框:1px solid #cd0000; } < div class = "包装" > < div class = "容器" > 使用"<strong>display: flex</strong>"将div居中 < / div > < / div >

注意:在使用上述实现之前,请检查display: table-cell和flex的浏览器兼容性。

你可以用一个简单的javascript (jQuery)块来做到这一点。

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

这将工作的方式回到IE6!

<!DOCTYPE html>在IE6上也是必需的! [将强制IE6默认严格模式以及]。

(当然,方框着色仅供演示使用)

#outer{ width: 180px; height: 180px; margin: auto; text-align: center; } #inner{ text-align: center; vertical-align: middle; width: 100px; height: 100px; display: inline-block; padding: .3em; } #center{ height: 100%; width:0px; vertical-align: middle; display: inline-block; } div {background: rgba(0,110,255,.7)} <DIV id=outer> <div id=center> </div><!--Don't break this line!--><div id=inner> The inner DIV </div> </DIV>