在另一个 div 中垂直居中一个 div [重复]

Question

我想将另一个 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 水平对齐到中间。但是垂直对齐呢？

Answer 1

tl;dr

垂直对齐中间有效，但您必须在父元素上使用table-cell，在子元素上使用inline-block。

此解决方案不适用于 IE6 和 7。
您的解决方案更安全。
但由于您使用 CSS3 和 HTML5 标记了您的问题，我认为您不介意使用现代解决方案。

经典解决方案（表格布局）

这是我最初的答案。它仍然可以正常工作，并且是获得最广泛支持的解决方案。表格布局将impact your rendering performance，因此我建议您使用更现代的解决方案之一。

Here is an example

---

测试于：

• FF3.5+
• FF4+
• Safari 5+
• Chrome 11+
• IE9+

---

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

---

现代解决方案（转换）

由于转换是fairly well supported now，因此有一种更简单的方法。

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

---

♥我最喜欢的现代解决方案（flexbox）

我开始越来越多地使用 flexbox its also well supported now 这是迄今为止最简单的方法。

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

更多示例和可能性： Compare all the methods on one pages

Answer 2

对于没有指定高度值的innerdiv，没有纯css解决方案使其垂直居中。一个javascript解决方案可以获取innerdiv的offsetHeight，然后计算style.marginTop。

Answer 3

我知道这个问题是在一年前提出的... 无论如何感谢CSS3，您可以轻松地在div中垂直对齐div（例如http://jsfiddle.net/mcSfe/98/）

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 

Answer 4

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

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

(Reference)

Answer 5

与其将自己与难以编写和难以维护的 CSS 纠缠在一起（这也需要仔细的跨浏览器验证！）我发现放弃 CSS 并改用非常简单的 HTML 要好得多1.0：

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

这完成了原始发布者想要的一切，并且健壮且可维护。

Answer 6

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

Answer 7

您可以使用简单的 javascript (jQuery) 块来完成此操作。

CSS：

#outerDiv{
    height:100%;
}

Javascript：

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

Answer 8

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

Outer Div 必须将其position 设置为relative 或fixed，并且Inner Div 必须将其position 设置为absolute、top 和left 至50% 并应用@ 987654330@.

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>

测试于：

• Opera 24.0（最低 12.1）
• Safari 5.1.7（至少 4 个，带有 -webkit- 前缀）
• Firefox 31.0（最低 3.6 带 -moz- 前缀，16 不带前缀）
• Chrome 36（至少 11 个带 -webkit- 前缀，36 个不带前缀）
• IE 11, 10（最少 9 个带 -ms- 前缀，10 个不带前缀）
• More browsers, Can I Use?

Answer 9

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

<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>

这也是float的好选择，祝你好运！

Answer 10

Vertical Align Anything with just 3 lines of CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

最简单

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

根据shouldiprefix，这是您唯一需要的前缀

您也可以使用 % 作为 .parent-of-element 的 'height' 属性的值，只要元素的父级具有高度或扩展其垂直大小的某些内容即可。