I'm trying to center an image and a div layer within a parent div, but I'm having trouble getting it to shift from the left side of the column. I've experimented with several methods, but nothing seems to work. Even using the margin auto technique doesn't seem to have any effect, probably due to Bootstrap 4's flexbox system.
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>I am looking to center both the image and the 'underlay' (the 'middle' div) in the middle.