【问题标题】: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;
    }
    

    【讨论】:

      猜你喜欢
      • 2020-09-05
      • 2013-02-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-19
      • 2015-04-18
      • 1970-01-01
      • 2019-03-27
      相关资源
      最近更新 更多