Question

可能重复：
What's The Best Way of Centering a Div Vertically with 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

How to vertically center a div for all browsers?

Answer 2

top: 50%;完全符合您的怀疑：它将顶部的边缘置于50％的高度。您可以通过应用等于元素高度一半的负垂直边距来抵消此效果。例如，如果元素为100px高，则应添加此属性：

margin-top: -50px;

Answer 3

如果您可以指定框的高度，则可以使用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 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

如何垂直居中？

4 个答案: