如何将其中一个子 div 居中在容器 div 上？ [复制]答案

【问题标题】：How to center one of the child div on the container div? [duplicate]如何将其中一个子 div 居中在容器 div 上？ [复制]
【发布时间】：2018-08-29 00:10:03
【问题描述】：

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

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

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

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

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

.container {
    position: relative;
}

解释：https://stackoverflow.com/a/36817384/3597276

【讨论】：

谢谢@Michael_B。但是当 .description 内容很大时 .arrow 会通过中心。
不客气。如果您可以发布完整示例（可能在 jsfiddle.net 或 codepen.io 中），我们可以为您提供进一步帮助。
谢谢它的工作。

【解决方案2】：

添加

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

【讨论】：