html - Bootstrap 4 中的中心图像和 Div 底层

Question

我试图将图像和 div 层置于包含 div 的中心，但到目前为止我无法让它从列的左侧移动。我尝试了几种不同的方法，但就是无法让它移动。即使 margin auto 技巧也不起作用，我怀疑这是因为 bootstrap 4 现在是一个 flex box。

HTML:

#user-avatar {
    background: #ff4e00;
    border-radius: 50%;
    width: 250px;
    margin-bottom: 25px;
    position: relative;
}

#user img {
    border-radius: 50%;
    width: 250px;
    transition: .5s ease;
    backface-visibility: hidden;
}

#user-avatar:hover img {
    cursor: pointer;
    opacity: 0.3;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.middle i {
    font-size: 34px;
}

#user-avatar:hover .middle {
    opacity: 1;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="user" class="col-12">
    <div class="col-12" id="user-avatar">
        <img class="mx-auto d-block" src="assets/users/av-lg/liane.png" />
        <div class="middle">
            <i class="fas fa-camera-alt"></i>
            <p>Edit Avatar</p>
        </div>
    </div>
    <p id="username" class="text-center"><span>Howdy </span>Liane</p>
    <div id="xp-bar" class="text-left">
        <div id="xp"><p><i class="fas fa-stars"></i> XP</p></div>
    </div>
    <p id="stats" class="text-right">Level 1</p>
</div>

这是我需要位于中心的图像和“底层”(“中间”div)。

Answer 1

将 margin-left: 50% 和 transform: translateX(-50%) 添加到 #user-avatar。检查下面的链接。谢谢你

http://jsfiddle.net/x1hphsvb/10994/