如何让div垂直居中？

Question

可能的重复：
将 Div 垂直居中的最佳方式是什么CSS

.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
top:50%;
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
}

现在，它似乎不起作用。前 50% 不垂直居中。有点到底部了。就好像顶部边框是 50% 一样。

Answer 1

如果可以指定盒子的高度，可以使用 margin-top: -[height / 2]px （填写[height / 2]，注意大多数浏览器将在 100% 缩放时将小数像素四舍五入）。

如果您可以指定其父级的高度，则可以执行以下操作：

parent {
    height: [height]px;
}
child {
    /* Make the element part of the inline flow, as vertical-align isn't supported on block elements */
    display: -moz-inline-box; /* Old Firefox doesn't support inline-block */
    display: inline-block;
    /* IE < 8 doesn't support inline-block on native block-level elements */
    *display: inline;
    *zoom: 1;

    /* The interesting bit */
    line-height: [height]px;
    vertical-align: middle;
}

如果预计子级的内容会换行到多行，则可以将其包装在重置 line-height< 的子子级中/代码>。

Answer 2

如何在所有浏览器中垂直居中 div？

Answer 3

top: 50%; 的作用正是您所怀疑的：它将顶部边缘置于 50% 的高度。您还可以通过应用等于元素高度一半的负垂直边距来抵消此效果。例如，如果元素高 100px，您将添加以下属性：

margin-top: -50px;

Answer 4

如果元素的高度是固定的，则执行以下

Css：

.title_text_only{
position:absolute;
width:100%;
display:none;
z-index:9;
**top:50%;**
bottom:50%;
text-align:center;
color:#fff;
font-size:18px;
text-shadow: 1px 1px 1px #666;
**margin-top: -(half the height)**
}

否则要以动态高度垂直居中 div，您将需要 javascript..

document.getElementById('myElement').style.marginTop = (-1) * document.getElementById('myElement').offsetHeight / 2