如何垂直居中div?

可能重复:
用CSS垂直居中Div的最佳方式是什么?

.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%。


如果您可以指定框的高度,则可以使用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的子孩子中。


如何垂直居中所有浏览器的div?


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

margin-top: -50px;
链接地址: http://www.djcxy.com/p/41493.html

上一篇: How do I center the div vertically?

下一篇: align in div with height 100%