CSS要素が中央に位置する様々な方法
3810 ワード
CSS要素が中央に位置する様々な方法
水平方向中央
外層にブロックレベルの親要素を追加し、 を設定する.
を設ける.
方法1インライン 外層にブロックレベルの親要素を追加し、 を設定する.サブエレメントは、インラインエレメント に設定する.メソッド二flexbox 外側にブロックレベルの親要素を追加し、 を設定します.
親要素 サブエレメント幅+オフセット+外側距離 (
垂直方向中央揃え
方法内マージン 設置 メソッド2要素の高さ=行の高さ 設置 メソッド3 flexbox(親要素の高さを設定する) 設置
方法1 親要素設定 サブエレメントはtopとleftを50%に設定します.margin上半分高margin左半分幅 方法二 親要素設定 サブエレメントtopをcalc(50%カット高さ)leftをcalc(50%カット幅) に設定.
親要素設定 サブエレメントはtopとleftを50%に設定します.transform: translate(-50%, -50%);
方法margin 親要素設定 サブエレメント設定幅+ 方法二 親要素設定 サブエレメント設定幅+
水平方向中央
インライン要素
text-align: center; <div style="text-align: center;">
<a> a>
div>
ブロックレベル要素
margin: 0 auto;及び幅 <div style="margin: 0 auto; width: 200px;">
div>
複数のブロックレベル要素
text-align: center; display: flex; justify-content: center; relative + absolute
postion: relative; width: 500px; left: 50%; margin-left: -250px; ) 垂直方向中央揃え
インライン要素
padding: 50px; height:100px; line-height:100px; height:200px; display:flex; flex-direction: column; justify-content: center; ブロックレベル要素
幅、高さ固定width:18 em;height: 10em;
position:relative; position:absolute; top: 50%; left: 50%; margin-left: -9rem; margin-top: -5rem; position:relative; position:absolute; top: calc(50% - 5em); left: calc(50% - 9em); 幅、高さが固定されていない
position:relative; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); flexbox
display: flex; margin: auto; display: flex; justify-content: center; align-items: center;