Сосредоточение изображения и подложка Div в Bootstrap 4

Question

Я пытаюсь центрировать изображение и слой div внутри содержащего div, но пока я не могу заставить его двигаться слева от столбца. Я пробовал несколько разных способов, но просто не могу заставить его двигаться. Даже авто-трюк на полях не работает, что я подозреваю, потому что bootstrap 4 теперь является гибкой коробкой.

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/

Answer 2

просто добавьте этот стиль - centrd now

#user-avatar {
    margin: 0 auto;
}

Answer 3

Добавить класс на id="user-avatar" в mx-auto

<div class="col-12 mx-auto" id="user-avatar">
        <img class="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>

https://jsfiddle.net/lalji1051/v06j8orn/9/