【CSS】テキストを上下中心に置きたい。

お世話になっております。
表題の件ですが、添付画像のようにテキスト部分が微妙に上にずれます。
どうしたら上下中央に寄せることができるのでしょうか？
それとも、ベースラインの関係でこれが正常なのでしょうか？

～下記補足～

pタグの中にテキストを入れております。
ブロックレベルなのでvertical-alignは効きません。
line-heightは3にしてます。
paddingは入れてません。
リセットcssは数種類試しました。

<p style="line-height:3;color:black;font-size:30px;background: gray;">文字が微妙に上にずれる</p>

以上、よろしくおねがいします。

Lhankor_Mhy

2018/11/28 05:38

再現できるコードをご提示ください

kei344

2018/11/28 05:38

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

退会済みユーザー

2018/11/28 05:53

返信ありがとうございます。コード追加しました。

行動規範の内容に同意します

回答1件

ベストアンサー

フォントによってbaselineとtext-after-edgeのバランスがそれぞれなので、描画結果を基準に中央を決めるとかでしょうか。

CSS
1div {
2	height: 90px;
3	font-size: 30px;
4	background: gray;
5	position: relative;
6}
7span {
8	position: absolute;
9	top: 50%;
10	transform: translateY(-50%);
11	display: block;
12	line-height: 1;
13}
14```**動くサンプル：**[https://jsfiddle.net/6u9rtx18/](https://jsfiddle.net/6u9rtx18/)
15
16---
17
18【理解しておきたい、CSSによるインラインレイアウトの仕組み（font-size／line-height編）Inline Layout─Frontrend Conference | HTML5Experts.jp】
19[https://html5experts.jp/takazudo/13339/](https://html5experts.jp/takazudo/13339/)