在另一个div中垂直居中一个div

我想在另一个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到中间。但是垂直排列呢?

当前回答

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

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

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

2017-11-28 13:00:55

其他回答

小提琴链接< http://jsfiddle.net/dGHFV/2515/>

试试这个

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

2016-07-26 09:49:27

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

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

(参考)

2013-08-14 06:48:59

在父元素上显示文本对齐中心，在子元素上显示内联块。这将居中所有的东西。我相信这叫做“块浮动”。

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

这也是一个很好的选择浮动，祝你好运!

2015-03-12 17:50:14

你可以通过添加下面提到的css样式来做到这一点。大多数浏览器都支持这一点。您可以在这里查看浏览器支持。愿一切都好！如有任何疑问，请评论

# outerDiv { 宽度:500 px; 身高:500 px; 位置:相对; 背景:灰色; 显示:flex; justify-content:中心; 对齐项目:中心; ｝ # innerDiv { 背景:青色; 宽度:284 px; 身高:290 px; ｝ < div id = " outerDiv " > < div id = " innerDiv " > 内心的Div < / div > < / div >

2017-09-12 12:56:33

试着像这样对齐内部元素:

top: 0;
bottom: 0;
margin: auto;
display: table;

当然还有:

position: absolute;

2015-10-21 12:42:52

在另一个div中垂直居中一个div

推荐文章

最新文章

标签