【position】CSSで親要素の中の子要素を中央配置する方法
ある範囲内でその中の文字や画像を中央配置したい時に便利な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%);
}
例えば、左右に画像と文字を並べたい時、隣の画像に対して縦方向で中央に揃えたい時などに便利ですね。
以上になります。
