Hi
So i have a picture that is 100% widht and heigh of a box. On that picture i want to have another div centered both vertical and horizontal. The width on the img and its parent is dynamic so im trying to do it with the table/table-cell method, but obv im doing something wrong.
My current code, what am i doing wrong?
<div class="box">
<img>
<div class="table">
<div class="table-cell">
<div class="iconbox">
</div>
</div>
</div>
</div>
.box{
width: 25%;
position: relative;
}
.img{
width: 100%;
}
.table{
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
.table-cell{
display: table-cell;
vertical-align: middle;
height: 100%;
}
.iconbox{
height: 64px;
width: 64px;
margin: 0 auto;
background: blue;
}