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

当前回答

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

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

(参考)

2013-08-14 06:48:59

其他回答

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

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

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

2017-11-28 13:00:55

我已经使用以下解决方案一年多了，它也适用于IE 7和8。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

2014-07-27 19:55:58

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

CSS:

#outerDiv{
    height:100%;
}

Javascript:

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

2014-08-22 18:51:05

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

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

(参考)

2013-08-14 06:48:59

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

# outerDiv { 宽度:500 px; 身高:500 px; 位置:相对; background - color: lightgrey; ｝ # innerDiv { 宽度:284 px; 身高:290 px; 位置:绝对的; 上图:50%; 左:50%; 转换:翻译(-50%，-50%); -ms-transform: -50%， -50%;/*即9 */ -webkit-transform (-50%， -50%);/* Chrome, Safari, Opera */ 背景颜色:灰色; ｝ < div id = " outerDiv " > < div id = " innerDiv " > < / div > < / div >

2017-09-23 17:06:52

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

推荐文章

最新文章

标签