如何将div垂直居中在另一个div内?

  • 回答 (2)
  • 关注 (0)
  • 查看 (409)

我想要中心一个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-leftvalues.Is有任何通用的解决方案,我可以用来居中innerDiv总是不管它的大小?

ByChenManByChenMan提问于
秋之夕颜清念念不忘,必有回响回答于

另一种方法是使用变换翻译

外层div必须将其position对relative或fixed和内蒙古事业部必须设置它position到absolute,top并left以50%和应用transform: translate(-50%, -50%)。

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}
div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>
MyLove回答于

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

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

扫码关注云+社区

领取腾讯云代金券