Question

我有两个固定大小的div，即使我重新调整屏幕大小，我也想让它们保持水平中间位置。即使我删除一个低屏幕的div，我想保持其他在中间。

这是我试过的代码...... Fiddle

<div id="wrapper1">
     <div id="one">1</div>
     <div id="two">2</div>
</div>

CSS来自......

#wrapper1 {
    width: 100%;
    height: 90px;
    margin: 0 auto;
}

#wrapper1 #one {
    width: 200px;
    height: 90px;
    background: white;
    display: inline-block;
    box-shadow: 0 0 5px #AAAAAA;
}
#wrapper1 #two {
    width: 100px;
    height: 90px;
    margin-left: 10px;
    background: white;
    display: inline-block;
    box-shadow: 0 0 5px #AAAAAA;
}


@media screen and (max-width: 400px) {

    #wrapper1 #two {
        display: none;
    }

}

Answer 1

Demo

text-align:center进入您的父级div将使所有子级div进入中心。

CSS

#wrapper1 {
    width: 100%;
    height: 90px;
    text-align: center; /* add just this to make child elements center in parent div */
}

Answer 2

只需添加下面提到的css： -

#wrapper1 {
    display: table;
    height: 90px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

通过display:table和text-align:center进入您的父级div，所有子级div都将位于中心，其中包含1个或1个以上的div ....

DEMO

将任何div保持在水平中间

2 个答案: