Centering an image with display:table-cell - css

Question

I want to center-align and bottom-align an <img> in a container block. The <img> needs to be constrained to the container dimensions, so max-width:100% and max-height:100% are set on it. Also I need to align a label to the top-right corner of the <img>, which makes things more complicated.
I have a working version using display:inline-block and line-height (below):
.block {
line-height: 236px;
text-align: center;
width: 236px;
height: 236px;
background: rgba(255, 0, 0, .3);
}
.flex {
background: rgba(255, 0, 0, .3);
display: inline-block;
vertical-align: bottom;
position: relative;
line-height: 18px;
}
img {
display: block;
max-width: 236px;
max-height: 236px;
width: auto;
height: auto;
}
label {
position: absolute;
top: 0;
right: 0;
}
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/x7q4E80.png" />
<label>X</label>
</div>
</div>
<br>
<!-- 374 × 187 -->
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/dBy1WKI.png" />
<label>X</label>
</div>
</div>
View on Codepen
However this requires a reset on the line-height of the label. Is it possible to use a different method like display:table-cell to center and bottom-align the content?
My closest attempt is below:
.block {
display: table-cell;
vertical-align: bottom;
width: 236px;
height: 236px;
background: rgba(255, 0, 0, .3);
}
.flex {
background: rgba(255, 0, 0, .3);
display: table-cell;
vertical-align: bottom;
position: relative;
}
img {
display: block;
max-width: 236px;
max-height: 236px;
width: auto;
height: auto;
}
label {
position: absolute;
top: 0;
right: 0;
}
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/x7q4E80.png" />
<label>X</label>
</div>
</div>
<br>
<!-- 374 × 187 -->
<div class="block">
<div class="flex">
<img src="http://i.imgur.com/dBy1WKI.png" />
<label>X</label>
</div>
</div>
View on Codepen

Answer 1

You can simplify your code same as like below.
.block1 {
background-color: red;
width: 100px;
height: 100px;
position: relative;
}
.block2 {
background-color: red;
width: 100px;
height: 100px;
position: relative;
margin-top: 10px;
}
.block1 a {
width: 20px;
height: 20px;
vertical-align: middle;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.block1 a label {
position: absolute;
top: 4px;
right: 0;
line-height: 0;
}
.block2 a {
width: 20px;
height: 20px;
vertical-align: middle;
margin: auto;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.block2 a label {
position: absolute;
top: 4px;
right: 0;
line-height: 0;
}
<div class="block1">
<div class="ctr-algn">
<a href="#">
<img src=".../images">
<label>x</label>
</a>
</div>
</div>
<div class="block2">
<div class="ctr-algn">
<a href="#">
<img src=".../images">
<label>x</label>
</a>
</div>
</div>
I hope you solve your issue.