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

当前回答

而不是让自己陷入难以编写和难以维护的CSS(这也需要仔细的跨浏览器验证!)我发现放弃CSS而改用非常简单的HTML 1.0会更好:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

这实现了原始海报想要的一切，并且是健壮的和可维护的。

2013-10-12 02:59:15

其他回答

这将工作的方式回到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><div id=inner> The inner DIV </div> </DIV>

2017-08-15 08:32:51

这对我很有用。可以定义外部div的宽度和高度。

代码如下:

.outer { 位置:相对; text-align:中心; 宽度:100%; 身高:150 px;//允许任何高度，也在%中。背景:灰色; ｝ .outer > div:first-child { 位置:绝对的; 上图:50%; 左:50%; 宽度:100%; -webkit-transform (-50%， -50%); -ms-transform: -50%， -50%; 转换:翻译(-50%，-50%); 背景:红色; ｝ < div class = "外" > < div class = "内部" > 把你的文本或div内容放在这里! < / div > < / div >

2016-02-24 21:49:00

而不是让自己陷入难以编写和难以维护的CSS(这也需要仔细的跨浏览器验证!)我发现放弃CSS而改用非常简单的HTML 1.0会更好:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

这实现了原始海报想要的一切，并且是健壮的和可维护的。

2013-10-12 02:59:15

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

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

(参考)

2013-08-14 06:48:59

我已经使用以下解决方案一年多了，它也适用于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

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

推荐文章

最新文章

标签