もくじ
margin 中央に配置
ただ、marginで左右の余白をautoにしただけの指定。
この指定だと、大枠の要素しか対応できません。
margin: auto;
.flex_box {
display: flex;
}
.flex_item {
margin: auto;
}flex 要素の縦横中央
display: flex;
今まではこう。
.flex_item {
display: flex;
justify-content: center;
align-items: center;
}便利なflexプロパティですが、
li>p>span など一部のみの場合に便利でよく使います。
display: grid;
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>まとめ
いかがでしたでしょうか？
代表的なプロパティばかりですが、参考にしていただけると幸いです。
