Вертикально выровнять дочерний элемент 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>