text-align:center 在 CSS 中不能垂直工作，我该如何解决这个问题？

Question

我正在使用仅包含文本的 div。它使用绝对定位将自身置于使用相对定位的图像 div 之上。如果我使用，我可以在 CSS 中水平居中 div

div { text-align:center; width:100%; }

但是当我尝试使用垂直居中时

div { text-align:center; height:100%; }

它不垂直居中。我猜这是因为 text-align:center 只指定水平方向.. 我怎么能解决这个问题？如果外部 div 是固定大小，但外部 div 不是固定大小，我已经看到了一些可行的解决方案。它是流畅的，所以我也需要它来流畅地工作。我试过使用 top:50% 但我希望它完全居中...我很缺乏经验，所以放轻松

Answer 1

试试这个...

div {  position:absolute; top:50%; }

然后通过

http://phrogz.net/CSS/vertical-align/index.html

Answer 2

试试这个。将代码设为

div { text-align:center; line-height:100%; } 

Answer 3

正如您所猜测的，您是对的，text-align: center; 用于仅水平对齐文本/元素而不是垂直对齐...因此，如果您谈论的是垂直对齐单行文本，则需要使用 line-height ，这将等于容器height

Demo

div {
    height: 100px;
    width: 100px;
    border: 1px solid #f00;
    line-height: 100px;
    text-align: center; /* Forgot this in the demo */
}

如果您希望垂直对齐整个元素，则可以使用position: absolute;，我不建议您使用，而是使用嵌套在display: table; parent 中的display: table-cell;

Demo 2

div {
    height: 100px;
    width: 100px;
    border: 1px solid #f00;
    display: table;
}

span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}