将 'div' 垂直居中在 % height 'div' 中答案

【问题标题】：Center a 'div' vertically in a % height 'div'将 'div' 垂直居中在 % height 'div' 中
【发布时间】：2011-03-22 18:29:34
【问题描述】：

是否可以将 div 垂直居中在 % height div 中？

【问题讨论】：

相关（但不是完全的欺骗）：Vertically Aligning Divs.
请检查那些链接jsfiddle.net/ERuX4/1 stackoverflow.com/a/10010055/1312610
这是一个适用于 IE、Firefox 和 Chrome 的示例。 jsfiddle.net/ETKhu 可能你以后的工作需要:)
工作示例。更简单的方法：jsfiddle.net/NT8Mn

标签： css html

【解决方案1】：

我更喜欢使用以下技术，它涉及两个容器：

外容器：

应该有display: table;

内容器：

应该有display: table-cell;
应该有vertical-align: middle;

内容框：

应该有display: inline-block;

您可以在内容框中添加任何您想要的内容，而无需关心它的宽度或高度！

此外，您可以通过将text-align: center; 添加到您的内部容器来轻松添加水平居中。

演示：

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

另见this Fiddle！

【讨论】：

【解决方案2】：

不需要 px 单位。

更改top、bottom、right、left 或使用百分比：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
    </head>

    <body>
        <div style="position: absolute;
                    top: 0;
                    bottom: 0;
                    right: 0;
                    left: 0;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;">
            <div style="position: relative;
                        display: inline-block;
                        height: 100%;
                        vertical-align: middle;"></div>
            <div style="background-color: #FEEF88;
                        position: relative;
                        display: inline-block;
                        vertical-align: middle;">Hola todo el mundo :D</div>
        </div>
    </body>
</html>

【讨论】：

【解决方案3】：

如果你的内部 div 有一个绝对高度（比如说 100 像素），你可以这样做：

.outerdiv{
  position: relative; // Or absolute, or fixed
  height: 80%;
}

.innerdiv{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;  // It's at 50%, but not really centered
  margin-top: -50px; // So just move it up by the half of its height :D
}

我不太喜欢这个解决方案，而且我确信还有很多其他可能性（可能使用表格或display: table-cell;） - 但这是我想到的第一个......

【讨论】：

【解决方案4】：

.outerdiv {
  display: table-cell;
  vertical-align: middle;
}

警告 - 它不会在所有浏览器中工作！

【讨论】：

【解决方案5】：

这个问题已经被问了足够多次了。

快速搜索将为您带来大量结果。无论如何，我首选的方法是使用display: table-cell; 和vertical-align: middle;。有关示例，请参阅this page。（请注意，这不适用于 Internet Explorer 6。）

【讨论】：

是的，我确实搜索了互联网，但是结果太多，我不知道哪些是有效的，哪些是旧帽子。干杯。
另外，另一种不需要复杂 CSS 的方法。试试这个：jsfiddle.net/NT8Mn
我搜索了互联网，这是最好的结果。