6つの方法は、divを水平垂直に中心揃えさせる方法を提案しています。

1年 ago
陽, 向宇
1 minute

一般的な水平垂直方向の中心合わせを実現する6つの方法：

  1. 親要素にdisplayプロパティをflexに設定、justify-contentとalign-itemsプロパティで子要素を水平垂直に中央寄せ
.parent {
display: flex;
justify-content: center;
align-items: center;
}
  1. 絶対位置とtransformプロパティを使用する：子要素のpositionプロパティをabsoluteに設定し、top、left、bottom、rightプロパティを使用して親要素の中央に配置する。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
  1. 絶対配置とマージンを使用する: 子要素のpositionプロパティをabsoluteに設定し、マージンで中央に配置する。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px; /* 子元素高度的一半 */
margin-left: -50px; /* 子元素宽度的一半 */
}
  1. グリッドレイアウトを使用する：親要素のdisplayプロパティをgridに設定し、place-itemsプロパティで子要素を中央に配置する。
.parent {
display: grid;
place-items: center;
}
  1. table-cellレイアウトを使う：親要素のdisplayプロパティをtable、子要素のdisplayプロパティをtable-cellに設定して、vertical-alignとtext-alignプロパティで中央寄せする。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
  1. 親要素のpositionプロパティをrelativeにし、子要素のpositionプロパティをabsoluteにして、負のマージンで中央寄せをする。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

これらの6つの一般的な方法については、目的に応じて、適切な1つを選択することができます。

bannerAds