Question

我有这样的HTML结构：

<div class="out">
    <div class="container">
        <div class="content">
            <p>hello</p>
        </div>
    </div>
</div>

.container div绝对定位为其父级的一半。现在，在这个容器中，我想垂直对齐.content div。由于.container被绝对定位，我遇到了麻烦。

这是一个小提琴：http://jsfiddle.net/2La6vdrc/2/

我想要＆＃34;你好＆＃34;内容垂直居中

对于IE8 +，我需要这个。

谢谢！

Answer 1

您可以遵循与此类似的模式：

.container {
  position: absolute;
}
.content {
  position: absolute or relative;
  top: 50%;
  transform: translateY(-50%);
}

继承人你的小提琴： http://jsfiddle.net/2La6vdrc/6/

CSS-Tricks博客对垂直居中的更多阅读： https://css-tricks.com/centering-css-complete-guide/

Answer 2

您可以使用css calc将其定位为高度的50％并减去想要居中的div的一半，请参阅下面的小提琴：

http://jsfiddle.net/davidbucka/oLaavyj1/

.content {
  background-color:white;
  position: absolute;
  width: 100%;
  height: 40px; /*height you want*/
  top: calc(50% - 20px); /* 50%-half of height l.21 */
}

有不同的方法，如果您需要另一种方式，请告诉我。

P.S。：只是阅读ie8支持问题的变化 - 我猜那个版本不支持

Answer 3

display:table; IE8 + - ＆gt; http://caniuse.com/#search=display%3A%20table

现在取决于您真正需要通过display:table;实现的目标，因为您可以看到background-color不起作用。

http://jsfiddle.net/2La6vdrc/8/

<div class="out">
    <div class="container">
        <div class="content">
            <p>hello</p>
        </div>
    </div>
</div>

.out {
    width:100%;
    height:500px;
    background-color:blue;
    position:relative;
}

.container {
    position: absolute;
    display: table; /* check this line */
    height: 100%;
    width: 50%;
    right: 0;
    top: 0;
    border: solid 5px red;
}

.content {
    background-color:white;
    display: table-cell; /* check this line */
    vertical-align: middle; /* check this line */
}

Answer 4

您可以更改position内容，然后合并top并转换translateY以垂直居中：

.content {
    position: relative;
    top: 50%;
    background-color:white;

    /* Note browser prefixes */
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);

    transform: translateY(-50%);
}

JSFiddle

由于您需要支持IE8，您可以使用额外的容器作为单元格，并将原始容器显示为表格。然后，您可以使用vertical-align：

.out {
    width:100%;
    height:500px;
    background-color:blue;
    position:relative;
}
.container {
    position: absolute;
    height: 100%;
    width: 50%;
    right: 0;
    top: 0;
    background-color: red;
    display: table;
}
.cell {
    display: table-cell;
    vertical-align: middle;
}
.content {
    background-color:white;
}

<div class="out">
    <div class="container">
        <div class="cell">
            <div class="content">
                <p>hello</p>
            </div>
        </div>
    </div>
</div>

Answer 5

另一种选择可能是使用CSS FlexBox。

.container {
    display: flex;
    align-items: center;
}

.content {
    flex: 1;
}

FlexBox已成为我首选的方法，以一种感觉在语义上合适的方式流畅地对齐元素。

垂直对齐位置内的div：绝对父级

5 个答案: