子div要素を動的な高さを持つ親divと垂直に整列する

Question

子要素を動的な高さを持つ親に垂直に配置する方法を教えてください。

CSSコード：

parent{ 
    height: 400px; 
} 
.child{ 
    position:relative; 
    top:50%; 
    transform: translateY(-50%;); 
} 

これは、かつて子供を設定し、その後、変更されません。親の動的な高さに応じて変更するにはどうすればよいですか？

Answer 1

display: flexを使用できます。

.parent { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100px; 
 
    width: 100px; 
 
    margin: 1em; 
 
    background-color: tomato; 
 
} 
 

 
.child { 
 
    width: 10px; 
 
    height: 10px; 
 
    background-color: yellow; 
 
} 
 

 
You can use `displa: flex`. 
 

 
The following doesn't rely on parent's height.

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>