CSS で水平方向の中央揃えと垂直方向の中央揃えを実現するためのいくつかの方法

方法 1: テキストと線要素を水平方向と垂直方向の中央に配置する

{
    text-align: center; // 水平居中
    line-height： 盒子高度； // 垂直居中，只适合行元素
}

利点: シンプルで実用的。

短所: 単一行のテキストおよび行要素コンテンツにのみ適しています。

方法 2: ボックスの既知の幅と高さに基づいてボックスを中央に配置します。

{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px; // 盒子的一半高度
    margin-left: -100px; // 盒子的一半宽度
}

// 以上代码可优化为下方代码：
{
    position: absolute;
    width: 200px;
    height: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 100px);
}

利点: 行要素とブロック要素の両方を中央に配置できます。

短所: ボックスの幅と高さを固定する必要があります。

方法 3: 絶対配置 + CSS 変換を使用してボックスを中央に配置する

{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

利点: 行要素とブロック要素の両方を中央に配置でき、ボックスの幅と高さを固定する必要がありません。

欠点: ボックスの高さが画面の高さを超えると、ボックスの上部がビューポートによって切り取られます。[ビューポート: 視覚的に見える画面の幅と高さを表します]

方法 4: フレックスレイアウトを使用してボックスを中央に配置する

// 父盒子
{
    display: flex;
}
// 子盒子
{
    margin: auto;
}

利点: 実装が簡単で、親ボックスまたは子ボックスのサイズを設定する必要がありません。

欠点: 一部の下位バージョンのブラウザではサポートされていない可能性があります。

方法 5:vertical-align + line-height 属性を使用して垂直方向に中央揃えにする

.div {
    width: 364px;
    height: 221px;
    line-height: 221px;
    text-align: center;
    img {
      vertical-align: middle;
      width: 48px;
      height: 48px;
    }
  }

利点: 方法 1 と同様、実装が簡単で便利です。

短所: div 内の画像の垂直方向の中央揃えに適している、親コンテナの高さを知る必要があります。

上記の内容は私が開発中にまとめたセンタリング方法であり、類似点がある場合は全くの偶然です。また、間違いがあればご指摘ください！