如何将 child div 之一置于容器 div 的中心？

Question

如何仅将 .arrow 居中，同时保持 .description 不变？

<div class="container">
    <div class="description"></div>
     <div class="arrow"></div>
</div>

.container{
    display: 'flex',
    'flex-direction': 'column'
}

Answer 1

添加

.arrow {
    width: 50%;
    margin: 0 auto;
}

Answer 2

.arrow {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

.container {
    position: relative;
}

解释：

如何将 child div 之一置于容器 div 的中心？

How to center one of the child div on the container div?

html

css

centering

flexbox