[CSS] transformによる要素の上下左右中央揃え

0

上下中央揃え

HTML

<div class="containing_block">
    <p>中央に配置したい文字列</p>
</div>

CSS

.containing_block {
    position: relative;
    width: 100%;
    height: 200px;
}

.containing_block p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

上下左右中央揃え

HTML

<div class="containing_block">
    <p>中央に配置したい文字列</p>
</div>

CSS

.containing_block {
    position: relative;
    width: 100%;
    height: 200px;
}

.containing_block p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

参考：

position プロパティが absolute の場合、包含ブロックは position の値が static 以外 (fixed, absolute, relative, sticky) の直近の祖先要素におけるパディングボックスの辺によって構成されます。

https://developer.mozilla.org/ja/docs/Web/CSS/Containing_Block