垂直居中垂直文本

Question

我有一些垂直文本，我不能在他們的div中垂直居中。 這是一個例子： http ： //jsfiddle.net/hThGb/2657/

查看3個div（2個橙色和1個紅色）。 div中的文本不是垂直居中的，使得文本在div之外泄漏。

我嘗試過vertical-align: middle但是不會做任何事情。

如何將div中的垂直文本垂直居中？

Answer 1

如果boxes文本可以在一行中，則可以使用line-height屬性垂直對齊它們。

使用line-height:(height of the container)

JS小提琴演示

Answer 2

有一種方法可以使文本（多行文本）在未知高度的容器中垂直居中。

訣竅是使用100％高度容器的偽內容，設置display:inline-block 。 你的子元素也必須display:inline-block;

HTML

<div>
    <p>texts online line</p>
</div>
<div>
    <p>texts will be shown in two lines, lorem ipsum doilor sit amet conse </p>
</div>

<div class="last">
    <p>texts will be shown in three lines, lorem ipsum doilor sit amet conse lorem ipsum dolor sit  </p>
</div>

CSS

div {
    background:#bababa;
    padding:10px;
    width:260px;
    height:100px;
    margin:0 0 10px;
}

.last {
    height:200px;
}

div > p {
    margin:0;
    display:inline-block;
    vertical-align:middle;
    width:100%;
}

div:before {
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
    font:0/0 a;
    margin-left:-4px;
}

小提琴演示

這是怎么回事

全部display:inline-block同一兄弟中的display:inline-block元素將對CSS的vertical-align屬性做出反應; 偽元素將占據容器的100％高度，其他元素將對此作出反應！ 因此，您可以垂直居中，中間或底部或頂部均勻。

Answer 3

正如在這里應用#chat ，現在可以使用flexbox輕松完成此操作。

Answer 4

你可以使用padding這三個div