---
title: Centering an image with HTML and CSS | TestingBot
description: Learn how to use CSS and HTML to center DOM elements on your page.
source_url:
html: https://testingbot.com/software-testing-questions/how-to-center-an-image-in-html
md: https://testingbot.com/software-testing-questions/how-to-center-an-image-in-html.md
---
# How to Center an Image in HTML
- [ ](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname= "Share on Facebook")
- [ ](https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname= "Share on Twitter")
- [ ](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname= "Share on LinkedIn")
- [ ](https://www.addtoany.com/add_to/hacker_news?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname= "Share on HackerNews")
Centering an image in HTML is a common task that can be approached in various ways, depending on the specific needs of your page layout. Below we'll go over some tips on how to center elements on a web page, using CSS and HTML.
## Using the Center Tag
Historically, the `` tag was used in HTML to center-align text and images within a webpage. It is however important to note that the `` tag is now deprecated in HTML5 due to its presentational nature, which goes against the principles of modern web standards (that separate content from styling).
While it might still work in some browsers, it is not recommended for use in new HTML code. The recommended way is to use CSS for all layout and styling purposes.
**Example using the `` tag:**
```html
```
## Using CSS
To center an image horizontally using CSS, you can use the `margin` property:
```html
Center Image Horizontally
```
### Using Flexbox
Flexbox provides a more robust way to center elements both horizontally and vertically. Here's how you can center an image using Flexbox:
```html
Center Image with Flexbox
```
## Other helpful resources
### How Do You Center Text in the Middle of an Image in CSS?
To overlay text centered over an image, you can use the following approach:
```html
Text Over Image
Centered Text
```
### How Do I Center an Image and Make It Responsive in CSS?
To center an image and make it responsive, ensure it scales with the size of its container:
```css
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
```
### How Do I Center Align an Image Vertically?
To vertically center an image in a container, you can use Flexbox:
```css
.container {
display: flex;
align-items: center;
height: 200px; /* or any height */
}
```
### How Do I Center an Image Without Stretching in CSS?
To center an image without stretching, avoid setting absolute widths or heights that exceed the image’s natural dimensions:
```css
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
```
### How Do I Make an Image Fit My Screen in HTML?
To make an image fit the screen while maintaining its aspect ratio, you can use:
```css
img {
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height */
object-fit: cover; /* Cover the container without losing aspect ratio */
}
```
- [ ](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname=)
- [ ](https://www.addtoany.com/add_to/twitter?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname=)
- [ ](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname=)
- [ ](https://www.addtoany.com/add_to/hacker_news?linkurl=https%3A%2F%2Ftestingbot.com%2Fsoftware-testing-questions%2Fhow-to-center-an-image-in-html.md&linkname=)
## Sign up for a Free Trial
Start testing your apps with TestingBot.
No credit card required.
[Start Free Trial](https://testingbot.com/users/sign_up)
## Other Questions
### [Regression Testing : Definition, How it works](https://testingbot.com/software-testing-questions/what-is-regression-testing "Regression Testing : Definition, How it works")
### [Updating Safari on an older macOS version](https://testingbot.com/software-testing-questions/how-to-update-safari-on-an-old-mac "Updating Safari on an older macOS version")
### [Use Faker to generate random data for your tests](https://testingbot.com/software-testing-questions/how-to-generate-fake-data "Use Faker to generate random data for your tests")
### [What exactly is an iOS device?](https://testingbot.com/software-testing-questions/what-is-an-ios-device "What exactly is an iOS device?")
### [Change the timezone on a Mac machine](https://testingbot.com/software-testing-questions/how-to-change-your-time-zone-on-mac "Change the timezone on a Mac machine")
### [Learn about White Box Testing](https://testingbot.com/software-testing-questions/what-is-white-box-testing "Learn about White Box Testing")