将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;博士

垂直对齐中间作品,但您必须table-cell在父元素和inline-block子元素上使用.

这个解决方案在IE6和7中不起作用.
你的解决方案更安全.
但是,既然您使用CSS3和HTML5标记了您的问题,我认为您不介意使用现代解决方案.

经典解决方案(表格布局)

这是我原来的答案.它仍然可以正常工作,是最广泛支持的解决方案.表格布局会影响您的渲染性能,因此我建议您使用一种更现代的解决方案.

这是一个例子

测试中:

• 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;
}

现代解决方案(转型)

由于现在转换得到了很好的支持,因此有一种更简单的方法.

CSS

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

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

演示

♥我最喜欢的现代解决方案(flexbox)

我开始越来越多地使用flexbox 它现在也得到了很好的支持它是迄今为止最简单的方法.

CSS

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

演示

更多示例和可能性: 在一个页面上比较所有方法

Answer 2

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

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

(参考)

Answer 3

另一种方法是使用Transform Translate

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

测试中:

• Opera 24.0(最低12.1)
• Safari 5.1.7(至少4个带有-webkit-前缀)
• Firefox 31.0(带有-moz-前缀的最小3.6,不带前缀的16)
• Chrome 36(至少11个带-webkit-前缀,36个没有前缀)
• IE 11,10(最少9个带-ms-前缀,10个没有前缀)
• 更多浏览器,我可以使用吗？

Answer 4

垂直对齐任何只有3行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'属性的值,只要element的父元素具有高度或某些内容可以扩展其垂直大小.

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

#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }

<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

您可以通过简单地添加上述CSS样式来实现。祝一切顺利。如有任何疑问，请发表评论

Answer 7

我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度,并将其与其他内容垂直对齐.克里斯科伊尔有一篇关于这项技术的好文章.http://css-tricks.com/centering-in-the-unknown/ 这样做的巨大优势是可扩展性.您不必知道内容的高度,也不必担心内容的增长/缩小.这个解决方案缩放:).

这里有一个你需要的所有CSS的小提琴和一个工作示例. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

Answer 8

如果您在阅读了上面给出的精彩答案后仍然不明白。

这里有两个简单的例子来说明如何实现它。

使用显示：表格单元格

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}

<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

使用弹性盒（显示：flex）

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}

<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

注意：在使用上述实现之前，请检查 display: table-cell 和 flex 的浏览器兼容性。