Struggling to create a responsive diamond shape in the middle of a container with a centered logo? Here's what I mean:
(images are self-drawn graphics)
I've successfully made the diamond shape responsive and centered using this code:
.cover-diamond {
position: absolute;
z-index: 3;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 25%;
height: 0;
padding-bottom: 25%;
border: solid 1px #EBC65A;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
But aligning the <img> logo in the center has been challenging, resulting in complications.
I've experimented with various methods like display:table-cell and vertical-align:middle, but no luck. Can anyone provide the correct approach?
EDIT:
The image is 80% wide with an unknown height, and the diamond shape also has an unknown height due to the 25% padding. Visit my fiddle for more details.