なぜ `position：absolute;` `vertical-align：middle`を破壊するのですか？

Question

テキストcenterは、コードショーのようなdivの中央にあります。今

.Absolute-Center { 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 100px; 
 
    border:1px solid red; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    }

<div class="Absolute-Center"> 
 
    <p>center</p> 
 
</div>

.Absolute-CenterのCSSの行position:absolute;を追加します。

.Absolute-Center { 
 
    position:absolute; 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 100px; 
 
    border:1px solid red; 
 
    text-align:center; 
 
    vertical-align:middle; 
 
    }

<div class="Absolute-Center"> 
 
    <p>center</p> 
 
</div>

テキストcenterは、なぜposition:absolute;本になることが、今のdivの中心にありませんでしたか？

Answer 1

position: absolute割り込みがdisplay: table/table-cellにあるため、centeredpadding/50％の行の高さがelement'sの高さを使用する必要があります。

代わりにflexboxを正しく使用してください。この

用途：

.Absolute-Center { 
 
    border: 1px solid red; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    height: 100px; 
 
    justify-content: center; 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100px; 
 
}

<div class="Absolute-Center"> 
 
    <p>center</p> 
 
</div>

Answer 2

CSS Flexboxを使用できます。

.Absolute-Center { 
 
    position: absolute; 
 
    display: flex; /* Flexbox Property */ 
 
    justify-content: center; /* Horizontal Centering */ 
 
    align-items: center; /* Vertical Centering */ 
 
    width: 100px; 
 
    height: 100px; 
 
    border:1px solid red; 
 
}

<div class="Absolute-Center"> 
 
    <p>center</p> 
 
</div>

・ホープ、このことができます：

は、以下のコードを見てください！

Answer 3

More Info

はあなたがラップすることができposition: absolutediplay:table-cellにはdisplay: blockをすることを強制的に与えること、およびvertical-align: middle;はブロックelemetsでは動作しませんAbsolute-Center

.wrap { 
 
    position: absolute; 
 
} 
 
.Absolute-Center { 
 
    display: table-cell; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<div class=wrap> 
 
    <div class="Absolute-Center"> 
 
    <p>center</p> 
 
    </div> 
 
</div>