How to Center an Image with CSS

In this comprehensive guide, learn how to center an image vertically and horizontally using vanilla CSS. There are several methods that you can pick-and-choose from based on your project's needs and your own personal preference. As a junior developer it can be difficult to understand how each method works and which method to choose - we'll be covering several of these methods with examples below to help guide you.

How to Center an Image Horizontally

Using CSS to center an image horizontally means you're centering it on the x-axis.

Method 1: Margin Auto

Using automatic margins on the left and right will align a block-level image element as long as it has a width that's less than 100%.

HTML

<img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">

CSS

img {
	display: block;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}

• display: block | Changes our image element to a block-level element from it's inline-level default
• width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)
• margin-left: auto & margin-right: auto | These two properties horizontally center our image property

Note: Instead of using margin-left: auto and margin-right: auto you can alternatively use the margin: auto shorthand, however, it sets all margin directions (margin-top, margin-right, margin-bottom, margin-left) to auto. This might disrupt your layout if you're using specific margin values on the top and bottom of your image.

Alternative CSS

/* Alternative: Using margin auto shorthand */
img {
	display: block;
  width: 250px;
  margin: auto;
}

Method 2: Display Flex

If you're using flexbox throughout your project, this is a great method to horizontally center an image. For this method you'll need to have a container div that wraps around the image element.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: flex;
  justify-content: center;
}

img {
  width: 250px;
}

• display: flex | Applying flexbox to our wrapper div
• justify-content: center | Centers flex children horizontally (assuming the flex-direction property is left as default)
• width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 3: Text Align

Images are inline-level elements by default, when contained by a block-level element, you can use the text-align property on the container to center the image horizontally.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: block;
  text-align: center;
}

img {
  width: 250px;
}

• display: block | Ensures our wrapper div is a block-level element so that text-align works (by default a div is block-level, so in this context it is redundant, however the element you use as a wrapper may not be block-level by default and will need this applied)
• text-align: center | Applied on a block-level wrapper element, it will center the image element that it contains
• width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 4: Position Absolute, CSS Calc & CSS Transform

This method is a manual way of centering our image horizontally, it is more involved than the other methods covered in this guide, but it is still responsive.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS - Calc

div {
  position: relative;
}

img {
  position: absolute;
  left: calc(50% - 125px);
  width: 250px;
}

• position: relative | Makes the image align in relation to the container div
• position: absolute | Lets you set where the image will be positioned exactly
• left: calc(50% - 125px) | Horizontally centers our image
  - left: 50% alone would move the left side of the image to be horizontally centered
  - We know the width of our image (250px), to center the image horizontally we need to move it over by half of that width (125px)
  - calc(50% - 125px) moves our image over by 50% minus half of the image's width (125px), horizontally centering the image

Alternative CSS - Transform & Translate

This alternative method swaps out the calc function in our left property and replaces it with a transform property + translate function. This method is arguably better for responsivity as you don't need to know what the width of our image is - allowing our image to be dynamically sized as needed without additional media queries in our CSS to compensate.

div {
  position: relative;
  height: 500px;
  background-color: red;
}

img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
}

The differences between the previous CSS example and this alternative version lie in the top, transform, and width properties (we removed the height property).

• left: 50% | Moves the left side of the image over to the horizontally aligned position
• transform: translateX(-50%) | This moves the image left by 50% of it's height so that the center of the image aligns with the horizontally centered position
• width: 25% | We set our width to 25% to show that we have not explicitly set our height + width, meaning it can responsively change as needed and this method will continue horizontally centering our image

How to Center an Image Vertically

Using CSS to center an image horizontally means you're centering it on the y-axis. Centering an image vertically has less methods than horizontally, but luckily the more modern methods like flexbox and grid make the task easy.

Method 1: Display Flex

You'll need a container div wrapped around the image you're centering, you'll also need to give the container a height that is larger than the image's height so that we can vertically center it within the container.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: flex;
  align-items: center;
  height: 500px;
}

img {
  width: 250px;
}

• display: flex | Sets the wrapper div to flexbox
• align-items: center | Centers flex-items to be vertically centered, our image is the only flex-item in this example (assuming the flex-direction property is left as default)‍
• height: 500px | The container needs to be taller than the image we are centering so that the image can be centered vertically inside of it

Method 2: Position Absolute, CSS Calc & CSS Transform

This method is a manual way of centering our image vertically, it is more involved than the other methods covered in this guide, but it is still responsive.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS - Calc

div {
  position: relative;
  height: 500px;
}

img {
  position: absolute;
  top: calc(50% - 37.5px);
  height: 75px;
}

• position: relative | Makes the image align in relation to the container div
• height: 500px | Sets a height for the container div that is higher than the height of the image
• position: absolute | Lets you set where the image will be positioned exactly
• top: calc(50% - 37.5px) | Sets the position of the image as vertically centered
  - top: 50% alone would move the top of the image to be vertically centered
  - We need to move the image up a bit so that the center of the image lines up to be vertically centered
  - calc(50% - 37.5px) moves the image down by 50%, then we subtract half the image image's height (image height: 75px, half of that is: 37.5px) from that figure to move the image up to be vertically centered

Alternative CSS - Transform & Translate

This alternative method swaps out the calc function in our top property and replaces it with a transform property + translate function. This method is arguably better for responsivity as you don't need to know what the height of our image is - allowing our image to be dynamically sized as needed without additional media queries in our CSS to compensate.

div {
  position: relative;
  height: 500px;
  background-color: red;
}

img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25%;
}

The differences between the previous CSS example and this alternative version lie in the top, transform, and width properties (we removed the height property).

• top: 50% | Moves the top of the image down to the vertically aligned position
• transform: translateY(-50%) | This moves the image up by 50% of it's height so that the center of the image aligns with the vertically centered position
• width: 25% | We set our width to 25% to show that we have not explicitly set our height + width, meaning it can responsively change as needed and this method will continue to vertically center our image

How to Center an Image Horizontally and Vertically at the Same Time

Centering an image vertically and horizontally means you're centering it on both the x and y axes. You can think of it of placing your image right in the center of a page (wrapper div).

Method 1: How to Center an Image with CSS Grid

Using this centering method with CSS Grid will center our image both horizontally and vertically at the same time. This is arguably the easiest way to vertically and horizontally center an image.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  display: grid;
  place-items: center;
  height: 500px; 
}

img {
  width: 250px;
}

• display: grid | Applies grid layout to our wrapper div
• place-items: center | Vertically and horizontally centers our image
• height: 500px | Sets a height for the container div that is higher than the height of the image
• width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 2: Display Flex (horizontal & vertical)

Using flexbox to center an image horizontally and vertically is just a matter of combining both the horizontal and vertical methods together.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

img {
  width: 250px;
}

• height: 500px | Sets a height for the container div that is higher than the height of the image
• display: flex | Sets the wrapper div to flexbox
• justify-content: center | Centers flex-items horizontally, our image is the only flex-item in this example (assuming the flex-direction property is left as default)‍
• align-items: center | Centers flex-items to be vertically centered, our image is the only flex-item in this example (assuming the flex-direction property is left as default)‍
• width: 250px | Gives the image a set width lower than 100% (you can use a % instead of px value here to help with responsiveness)

Method 3: Position Absolute, CSS Transform & CSS Translate (horizontal & vertical)

This method is a manual way of centering our image vertically and horizontally, it is more involved than the other methods covered in this guide, but it is still responsive.

HTML

<div>
  <img src="https://uploads-ssl.webflow.com/5f188c7c01b1cd56e383610e/5f21f00868fd8ee81abc29de_logo_transparency.png">
</div>

• <div> | A container (aka wrapper) div that contains the image that we need to center

CSS

div {
  position: relative;
  height: 500px;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
}

• position: relative | Makes the image align in relation to the container div
• height: 500px | Sets a height for the container div that is higher than the height of the image
• position: absolute | Lets you set where the image will be positioned exactly
• left: 50% | Sets the left side of the image to be horizontally centered
• top: 50% | Sets the top side of the image to be vertically centered
• transform: translate(-50%, -50%) | Adjusts the image position to move up by 50% of its height and left by 50% of its width so that the center of the image is centered horizontally and vertically
  - The translate CSS function is shorthand for the translateX and translateY functions
  - It can be broken down as translate(X, Y)
• width: 25% | We set our width to 25% to show that we have not explicitly set our height + width, meaning it can responsively change as needed and this method will continue vertically center our image

Learn More CSS

If you're looking for more CSS content we have a couple of podcast episodes that you might be interested in:

CSS Attribute Selectors & Custom Attributes

Listen Here: Episode Link

• Learn how to select elements based on the presence of an attribute, or the presence of an attribute with a specific value
• Filter through attribute values with vanilla CSS features
• Create and work with custom attributes

CSS Selectors Crash Course

Listen Here: Episode Link

• Learn how to select elements based on their class, ID, or HTML element type
• CSS selector structure
  - Simple selector
  - Compound selector
  - Relative selector
  - Selector List
• Grouping selectors

Scrimba Discount!

• Learn to code using Scrimba with their interactive follow along code editor
• Join their exclusive discord communities and network to find your first job!
• Use this URL to get 10% off on all their paid plans: https://tinyurl.com/ScrimbaHATT

Sources

• How to Vertically & Horizontally Center an Image in HTML & CSS (Hubspot)
• HTML Center Image – CSS Align Img Center Example (Free Code Camp)
• How to Center an Image Vertically and Horizontally with CSS (Free Code Camp)