CSS-Divセンタリング方式（Position方式）

コード表示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <!--Lead Into CSS-->
</head>

<body>
    <div class="parent">
        <div class="child">
            This is the method of div's center
        </div>
    </div>
</body>

</html>

HTML コンテンツ: CSS ファイルは同じフォルダー「/static/css/index.css」に保存されます。

.parent {
    width: 600px;
    height: 600px;
    background-color: blue;
    position: relative;
}

.child {
    width: 300px;
    height: 300px;
    text-align: center;
    background-color: green;
    color: red;
    border-radius: 10%;

    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
}

CSS コンテンツ:

実際の効果:

実際の効果:この時点で、サブクラス Div (緑) はすでに親クラス Div (青)の中央にあります。

具体分析：

    position： absolute；

要素は通常のドキュメントフローから移動され、要素用のスペースは確保されません。要素の位置は、最も近い非静的に配置された祖先要素に対する要素のオフセットを指定することによって決定されます。絶対的に配置された要素にはマージンを設定でき、他のマージンとマージされません。------位置 - CSS (カスケードスタイルシート) | MDN

つまり、子クラスの位置は親クラスと同等です。

    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;

CSS leftこのプロパティは、位置決めされた要素の左マージン境界と、それを含むブロックの左境界の間のオフセットを定義します。位置決めされていない要素に対してこのプロパティを設定しても効果はありません。-----左 - CSS (カスケードスタイルシート) | MDN

CSS bottomstyle属性は、位置決めされた要素の下マージンの境界と、それを含むブロックの下端の境界の間のオフセットを定義します。位置決めされていない要素に対してこの属性を設定しても効果はありません。 -----下 - CSS (カスケードスタイルシート) | MDN

今すぐ：

left は、子クラスの左外側境界と親クラスの div ブロックの間の距離に相当し、25% は親クラスの幅の 25% です。

right は、子クラスの右外側境界と親クラスの div ブロックの間の距離に相当し、25% は親クラスの幅の 25% です。

top は、子クラスの上端と親クラスの div ブロックの間の距離に相当し、25% は親クラスの高さの 25% です。

下部は、子クラスの下部境界と親クラスの div ブロックの間の距離に相当します。25% は親クラスの高さの 25% です。

連絡方法は？

[email protected]