css子要素div（既知の幅と高さ、不明な幅と高さ）は、親要素divを垂直方向に中央揃えにします

1.既知の子要素のdivの幅と高さ

1.親の息子フェーズ（子要素の絶対配置、親要素の相対配置）

2、左：50％上：50％

3.マージン-左：それ自体の幅の半分マージン-上：それ自身の高さの半分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子div水平垂直居中</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background: pink;
            position: relative;
        }

        .inner {
            width: 50px;
            height: 50px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -25px;
            margin-top: -25px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            子
        </div>
    </div>
</body>
</html>

2つの不明な子要素のdivの幅と高さ

息子は父親ではないので、css3のtransformプロパティを使用してtranslateの値をcenterに設定します

        .inner {
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
        }

第三に、display：flexを使用して、サブディビジョンサイズが固定されておらず、垂直方向に中央に配置されていないことを認識します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子div水平垂直居中</title>
    <style>
        .outer {
            width: 200px;
            height: 200px;
            background: pink;
            display: flex;
            justify-content: center;/*实现水平居中*/
            align-items:center; /*实现垂直居中*/
        }

        .inner {
            width: 50px;
            height: 50px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            子
        </div>
    </div>
</body>
</html>

cssテキストは水平方向と垂直方向の中央に配置されます（親要素divの幅と高さは既知で、幅と高さは不明です）：https ： //blog.csdn.net/qq_40015157/article/details/113844403

css子要素div（既知の幅と高さ、不明な幅と高さ）は、親要素divを垂直方向に中央揃えにします

css子要素div（既知の幅と高さ、不明な幅と高さ）は、親要素divを垂直方向に中央揃えにします

おすすめ