html - text-align :center doesn't work vertically in CSS, 我该如何解决这个问题？

Question

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

div { 文本对齐:居中； 宽度:100%； }

但是当我尝试使用

将它垂直居中时

div { 文本对齐:居中； 高度:100%； }

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

Answer 1

如您所料，您是对的，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-cell; 嵌套在 display: table; parent

中

Demo 2

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

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