Center an image both vertically & horizontally
div.container {
display: flex;
}
img {
margin: auto; /* aligns the image in the center both from x & y axis */
}
Center an image horizontally
div.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
Center an image vertically
div.container {
display: flex;
align-items: center;
}
CENTER ALIGN IMAGE WITHOUT FLEXBOX
Center align image (vertical & horizontal) without flexbox
div.container {
position: relative;
}
img {
position: absolute;
top: 50%; /* push the image 50% from the top */
left: 50%; /* push the image 50% from the left */
transform: translate(-50%, -50%);
/* push back the image by 50% from the left & top accordingly */
}
Horizontal center align image without flexbox
img {
display: block;
margin: 0 auto;
}
Vertical center align image without flexbox
div.container {
position: relative;
}
img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}