如何垂直居中div？

Question

可能重复：
如何使用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%一样。

- TIMEX

---

首先尝试添加一个任意的高度。 - Eric Fortis

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。

- eyelidlessness

Answer 2

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

这篇文章讨论了在所有浏览器中如何使用CSS来垂直居中一个div。

- Gaurav

Answer 3

top: 50%; 的作用正如你所想的那样：它将顶部 边缘 放置在50%的高度处。你可以通过应用等于元素高度一半的负垂直边距来抵消这种效果。例如，如果元素高度为100px，则应添加此属性：

margin-top: -50px;

- Matt Ball

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

- Tarun