Centering Images
Images can be centered in three ways: horizontally, vertically, or both at the same time.
CSS offers several methods for doing it.
Center an Image Horizontally
Two common choices for centering an image horizontally are margin: auto and display: flex.
Using margin: auto
margin: auto is the first of the two options for horizontal centering.
It has no effect on inline elements, and <img> is inline by default, so the image needs display: block first.
A width is also required, and it has to be narrower than the page.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with margin auto</title>
<style>
img {
display: block;
margin: auto;
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<img src="madrid.jpg" alt="Madrid">
</body>
</html>
Using display: flex
display: flex offers a second route to horizontal centering.
Wrap the <img> element in a <div>, then give that container these two declarations:
display: flexjustify-content: center(horizontal centering of the image)
Finally, choose a width for the image that is narrower than the width of the page.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Flexbox Horizontal</title>
<style>
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<div>
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Vertical and Horizontal Centering
True centering means both directions at once, vertical and horizontal. Either display: flex or display: grid can do it.
Using display: flex
With flexbox, centering an image on both axes at once takes these declarations together:
display: flexjustify-content: center(horizontal centering)align-items: center(vertical centering)height: 600px(how tall the container is)
Put the <img> inside a <div> container, and keep the image's width below the container's width.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Flexbox Both Axes</title>
<style>
div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<div>
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>
Using display: grid
With grid, centering an image on both axes at once takes this combination:
display: gridplace-items: center(both horizontal and vertical centering)height: 600px(how tall the container is)
Here too, the <img> goes inside a <div> container, and the image gets a width narrower than the container's.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Center Image with Grid Both Axes</title>
<style>
div {
display: grid;
place-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}
</style>
</head>
<body>
<h2>Centered Image</h2>
<div>
<img src="madrid.jpg" alt="Madrid">
</div>
</body>
</html>