CSS垂直居中文本在段落/div ..

Question

我有一个段落<p class="timeNum">00:00</p>(只有一个带有文本的元素)，我想只移动文本区域的中间/顶部/底部的文本(我不是指垂直在段落中，而是在它自己的文本区域(当我们用鼠标标记文本时的蓝色区域))。当我将行高更改为等于font-size时，它没有帮助。垂直对齐也没有帮助。文本区域变小，但文本保持在底部/基线。谁能提出解决办法?谢谢!

html -> <p class="timeNum">Text</p>

css ->

 .timeNum {
    font-size: 24px;
    line-height: 24px;
    text-align: right;
  }

段落文本

Answer 1

你应该试试

display: table-cell;
vertical-align: middle;

更多信息，你可以看看这篇文章

Answer 2

如果它有一个包装器，你可以试试这个:

.wrapper { 
postion: relative
}
.textNum {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

将所有元素放在父元素的中间。从理论上讲，这是可行的。这是因为顶部和左侧的值以父元素的宽度为方向。但是翻译值会以元素本身的宽度为方向。

Answer 3

试试这个

.border-box {
  width:200px;
  height:200px;
  border:1px solid #ddd;
  float:left;
  text-align:center;
  display:table;
}
.border-box p {
  display:table-cell;
  vertical-align:middle;
}

<div class="border-box">
  <p>this is for your information</p>
</div>