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

Question

How to center only .arrow while keeping .description as it is?

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

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

Answer 1

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

.container {
    position: relative;
}

Explanation: https://stackoverflow.com/a/36817384/3597276

Answer 2

Add

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