CSSの絶対配置(absolute)とvertical-alignの設定 | フリーランスWebクリエーターUNVENTのホームページ

デザインのレイアウトの都合上、絶対配置(position: absolute)と中段寄せ(vertical-align: middle)を併用しなければいけないケースがあります。
ただ中段寄せをするためにはdisplay: table-cellにする必要があります。

同じタグにabsoluteとtable-cellは併用出来ない？

<div>
  <p>vertical-align: middleの文章</p>
<div>

<div>

<p>vertical-align: middleの文章</p>

<div>

div {
position: relative;
}

p {
position: absolute;
vertical-align: middle;
top: 0;
left: 0;
}

div {

position: relative;

}

p {

position: absolute;

vertical-align: middle;

top: 0;

left: 0;

}

上記の様に記述してしまうとvertical-align:middleが効きません。
absoluteを指定したタグはブロック要素となるためtable-cellが使用できなくなるからです

タグを1つ増やし親のタグに絶対配置、子のタグに中段寄せを設定すれば実現出来ます。

<div>
  <p><span>vertical-align: middleの文章</span></p>
<div>

<div>

<p><span>vertical-align: middleの文章</span></p>

<div>

div {
position: relative;
}

p {
display: table;
position: absolute;
top: 0;
left: 0;
}

span {
vertical-align: middle;
}

div {

position: relative;

}

p {

display: table;

position: absolute;

top: 0;

left: 0;

}

span {

vertical-align: middle;

}