flexで３行！gridでは、たった2行！ 縦横中央に配置する。
もくじ
マージンで中央に配置
ただ、marginで左右の余白をautoにしただけの指定。
この指定だと、大枠の要素しか対応できません。
余白を使って指定
.flex_box {
display: flex;
}
.flex_item {
margin: auto;
}フレックス要素の縦横中央
今までの基本スタイル
今まではこう。
.flex_item {
display: flex;
justify-content: center;
align-items: center;
}便利なflexプロパティですが、
li>p>span など一部のみの場合に便利でよく使います。
グリットを指定
display: grid; 細かいレイアウトで使う方が多いかと思いますが、
実は便利なplace-itemsという指定があります。
.flex_item {
display: grid;
place-items: center;
}またには、たった1 行で大かな位置も設定できます。
/* キーワード値 */
place-items: auto center;
place-items: normal start;
/* 位置による配置 */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;
/* ベースラインによる配置 */
place-items: baseline normal;
place-items: first baseline auto;
place-items: last baseline normal;
place-items: stretch auto;
/* グローバル値 */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: unset;
https://developer.mozilla.org/ja/docs/Web/CSS/place-items
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.CSS: カスケーディングスタイルシート
position 要素の縦横中央
絶対値を取得し細かく指定できるpositionプロパティですが、
relativeで親要素への指定も必須あり、
縦横中央の単純な指定もできますが、すこし勿体無い気がします。
ポジションで位置を指定する
.flex_box {
position: relative;
}
.flex_item {
position: absolute;
left: 50%;
top: 50%;
}また、要素分のズレを調整する必要がありますので、
細かく指定する場合や、画像の上に文字を配置する場合などに使用したいですね。
例1：
.box {
position: absolute;
left: calc(50% - 要素分);
top: calc(50% - 要素分);
}
例2：
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
}
私個人的には、親要素に100% 100vw 100vh など、
可変する要素に指定することが多いです。
可変する要素に指定することが多いです。
今回使用した、基本のHTMLです。
<div class="flex_box">
<div class="flex_item"></div>
</div>それでも、上手くいかない場合
もしかしたら、HTMLタグが親子になっていたり、別の要素を指定していませんか？
もしくは要素に余白が個別に指定されているとずれてしまう場合があります。
検証ツールを使って、実際の表示にどう適用されているのか
見ながら実装するとよいです。
