css:一般的な要素の中央揃え方法

通常、ブロックレベルの要素の水平中央は左右marginをautoに設定するだけでよい.一方、行間要素の中央は、親設定行の高さ(親の高さに等しい)とtext-align(center)によって実現されます.
しかし、ブロックレベルの要素が水平に垂直に中央に位置する必要がある場合は?本論文では,よく用いられる要素の水平垂直中心法をいくつかまとめた.
absolute
1.位置決め実装中央(オフセット値を計算する必要がある)

.absolute_p1 { position: relative; width: 200px; height: 200px;
}
.absolute_p1 .absolute_c1 { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; }

原理:位置決めによって要素の左上隅を中央にし、オフセット値margin調整によって要素の中心を

にする

欠点:高さ幅は事前に知っておく必要があり、それによって負のmargin(煩わしい)

を計算しなければならない.
2.位置決め実装中央(オフセット値の計算は不要)

.absolute_p2 { position: relative; width: 200px; height: 200px;
}
.absolute_p2 .absolute_c2 { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100px; height: 100px; margin: auto; }

原理:原理は私も知らない!位置付けはすべて0になったと推定して、要素は自分でどこに行くべきか分からないで、その場にいて戸惑うしかありません...

3.位置決め実装中央(オフセット値の計算不要)

.absolute_p3 { position: relative; width: 200px; height: 200px;
}
.absolute_p3 .absolute_c3 { position: absolute; left: 50%; top: 50%; width: 100px; height: 100px; transform: translate(-50%, -50%);
}

原理:位置決めによって要素の左上隅を中央に、translate変位要素によって中心を中央に、translateはパーセンテージをサポートするため、自分でオフセット量を計算する必要はありません

欠点:ieは

を使いたくない.
table

.table_p1 { display: table; width: 200px; height: 200px;
}
.table_p1 .inner { display: table-cell; vertical-align: middle; text-align: center;
}
.table_p1 .table_c1 { display: inline-block; width: 100px; height: 100px;
}

原理:table-cellの特性によって中央(table-cellのサブ要素は行間要素であるべき)

を実現する

欠点:

ie ...

これはmargin/float/absoluteにバイバイと言います

面倒くさい

inline

.inline_p1 { width: 200px; height: 200px; text-align: center; line-height: 200px; }
.inline_p1 .inline_c1 { display: inline; font-size: 0; padding: 50px;
}

ぎじげんそ

.before_p1 { width: 200px; height: 200px; font-size: 0; }
.before_p1::before { display: inline-block; content: ''; height: 100%; vertical-align: middle;
}
.before_p1 .before_c1 { display: inline-block; width: 100px; height: 100px; vertical-align: middle;
}

原理:擬似元素(高さ100%)を参照として用いる.before_c 1垂直中央

要点:.before_p 1のfont-sizeは、0に設定する必要があります.そうしないと、内部に偽要素のcontentサイズによってオフセットが発生します.

だから.before_c 1に文字がある場合はfont-size

を別途設定する必要があります

欠点:面倒くさい、真ん中になるために真ん中に

box flexbox
box 1

.box_p1 { display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; width: 200px; height: 200px;
}
.box_p1 .box_c1 { width: 100px; height: 100px;
}

box 2

.box_p2 { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px;
}
.box_p2 .box_c2 { width: 100px; height: 100px;
}

css:一般的な要素の中央揃え方法