【position】CSSで親要素の中の子要素を中央配置する方法

2023-09-01 by スキマデザイン

ある範囲内でその中の文字や画像を中央配置したい時に便利なCSSテクニックになります。

HTML

親要素blockの中の子要素pを中央配置していきます。

<div class="block">
<p>テキスト</p>
</div>

CSS

上下左右中央に寄せる場合

.block {
position: relative;
}

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

上下を中央に寄せる場合

.block p {
position: absolute;
top: 50%;
left: 0%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}

左右を中央に寄せる場合

.block p {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}

 

例えば、左右に画像と文字を並べたい時、隣の画像に対して縦方向で中央に揃えたい時などに便利ですね。

以上になります。