CSS段落/ divの縦方向にテキストを中央に...？

Question

私は段落<p class="timeNum">00:00</p>（テキストを含む要素が1つしかありません）を持っていて、テキスト領域の中央/上/下のテキストのみを移動したい（段落の中に縦になるわけではありませんが、テキスト領域（マウスでテキストをマークすると青い領域））。行の高さをfont-sizeと同じにすると、それは役に立たない。垂直方向の整列も役に立ちません。テキスト領域は小さくなりますが、テキストはボトム/ベースラインにとどまります。誰もが解決策を提案することができます。ありがとう！

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

CSS - >

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

text in a paragraph

Answer 1

あなたも、より多くの情報については

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

を試してみてください、あなたはこのSO postに見ていること

Answer 2

それはあなたがこの試みることができるラッパーがある場合は、単にこの

.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>

Answer 3

で試してみてください。

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

これは、その親要素の途中ですべてのものを配置します。理論的にはうまくいくはずです。これは、トップ値と左辺値が親の幅で方向付けされるためです。しかし、変換値は要素そのものの幅に基づいています。