Human beings crave symmetry — on and offline. This preference is so strong that it’s actually hardwired in our nervous system and has been for thousands of years.

Symmetry doesn’t mean things have to be identical on either side of an axis. There are several ways to create symmetry in a website, and the one we’ll be discussing in this article is balance.

Achieving balance in your website relies largely on the alignment of elements on a page. Centering elements, particularly large elements like images, can help make your design look ordered and visually pleasing. The process isn’t difficult, but it varies depending on whether the elements are inline or block. There are a few differences between these element types, but the major difference is how they affect the flow of a page.Download Now: Free Intro Guide to HTML & CSS

In this article, we’ll cover everything you need to know about centering images (or any inline elements), including: 

Inline vs. Block Elements

Block elements work by breaking the flow whereas inline elements work by going with the flow. That means block elements start on a new line and take up the full width of the viewport. Inline elements, on the other hand, do not start on a new line or take up the full width of the viewport. Of course, the width and style of these elements can change if specified by CSS, but this is their default.

Here’s an example to help visualize these differences. Below you’ll see a Bootstrap button styled as an inline element and a block element.

Inline vs. Block elements with bootstrap buttons

These different types of elements require different methods for aligning them. While the methods for centering a div element, for example, can be used for all block elements, they cannot be applied to images. That’s because images are inline elements.

Below we’ll walk through the process for centering an image (or any inline element) in HTML and CSS. This process will work whether you’re building from scratch or using a framework like Bootstrap CSS. Let’s get started.

Understanding HTML and CSS When Centering an Image

Before we discuss the different ways to center an image, it’s important to clarify what “in HTML” actually means.

Once upon a time, there was an HTML center element. This was a block-level element that would automatically center any block or inline elements it contained. So centering an image would require a single line of HTML that looked something like this:

 

 

   <center><img src="image1.jpg" alt="centered image" height="598" width="398"> </center>

However, this element was deprecated in HTML4. Now that HTML5 is the standard, this obsolete tag will likely not render in any modern browsers.

So what is the process for centering an image in HTML? The most important thing to understand is that centering an image today will require you to add CSS to HTML. You can no longer use HTML exclusively.

It’s recommended to keep your HTML separate from your CSS by placing your HTML in the body section of an HTML doc and the CSS in the head section or an external stylesheet. If you can’t separate them for some reason — maybe the website building platform you’re using keeps them together in the source code editor, for example — then you’ll have to use inline CSS.

Inline CSS is embedded in the HTML in the body section. The CSS is defined within the style attribute of the element being targeted. The syntax is similar to that of internal and external CSS: the CSS property is named and given a property value but with inline CSS, this rule set is enclosed by apostrophes rather than brackets.

Here’s an example. Let’s say you want to change the text color of the first header on your page to red and leave the other headers as is. Then you’d set the color property to the hex color code for red (#FF0000), place it within the style attribute, and place the whole thing inside the h2 tag. Check it out below.

Here’s the HTML:

 

 

   <h2 style="color: #FF7A59;">Inline CSS Example</h2>

<p>In this example, the inline CSS is used to style the above heading and no other headings on the page.</p>

<h2>Unstyled Heading</h2>

<p>Notice the heading above is not styled.</p>

Here’s how it would look on the front end:

Inline CSS example targeting one single header on page

Let’s say you wanted to use that same CSS but place it in the head section or an external stylesheet. You’d replace the style attribute in your HTML with a CSS selector. In the example below, an ID selector is used.

Here’s the HTML:

 

 

   <h2 id="first-heading">Internal CSS Example</h2>

<p>In this example, the internal CSS is used to style the above heading and no other headings on the page.</p>

<h2>Unstyled Heading</h2>

<p>Notice the heading above is not styled.</p>



Here’s the internal CSS:

 

 

   #first-heading {

color: #FF7A59;

}

Note: This is also how the CSS would look in an external stylesheet.

The result on the front end is the same, as shown below:

Internal CSS targeting one single header on page

Now that we understand the different ways you can write CSS, let’s look at how you can center an image using both HTML and CSS. 

How to Center an Image in CSS

There are a number of ways you can center an image, depending on whether you want to center it horizontally or vertically. We'll start by looking at how to center an image horizontally.

How to Horizontally Center an Image

There are three ways to center an image horizontally. The first works better for smaller images, and the second for larger images. The third works best if you're using the responsive layout model Flexbox.

We'll cover all three so you can center any image, no matter the size, on your website.

Method 1: Using the Text-Align Property

To center an image horizontally, you can use the CSS text-align property. 

Step 1: Since this property only works on block-level elements and not inline elements, let’s start by wrapping the image in a block element.

Step 2: Wrap the image in a div and then apply the style attribute with the text-align property set to center. It’s simple, but it only works if the image is smaller than your viewport.

Here’s the HTML with inline CSS:

 

 

   <h2>How to Center an Image with the Text Align Property</h2>

<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the text align property to center the image  below. This is the simplest but most limited method: it only works  if the image is smaller than the viewport.</p>

<div style="text-align: center;">

  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

 

Here’s how it would look on the front end:

An image centered with the text align property-1

Method 2: Using the Margin Property

Let’s say you have a very large image that you want to center. In that case, wrapping the image in a block element wouldn’t be the best option. Instead, you’d want to define the image with the CSS display property and set it to "block.” Here’s how to center an image using the margin property.

Step 1: Before setting the margins, set the width of the image to a fixed amount so it doesn’t span the viewport. In this case, I’ll use the percentage value of 60%. 

Step 2: Set the CSS margin property by defining the image with the CSS display property and set it to "block.” This will tell the browser to treat the image as if it were a block element, not an inline element, thus allowing you to use the CSS margin property.

Step 3: Set the left and right margins to "auto” so that they’re equal.

Here's the CSS:

 

 

img {

display: block;

width: 60%;

margin-left: auto;

margin-right: auto;

}

Here’s the HTML:

 

 

<h2>How to Center an Image with the Margin Property</h2>

<p>In this example,  the CSS margin and display properties are used to center the image below.</p>

<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" width="200" height="150">

<p>Once the display property is set to "block" and the image width to a fixed percentage, the margins on the left and right are set to "auto." That means the remaining blank space of the viewport will be split equally on both sides.</p>

 

Here’s how it would look on the front end:

an image centered with the display and margin properties-1

Method 3: Using the Flex Property

You can also center an image horizontally using the flex property, which doesn’t require margin calculations. 

Step 1: Wrap the image in a div element. 

Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. 

Step 3: Set the justify-content property to "center."

Step 4: Set the width of the image  to a fixed length value.

Here's the CSS:

 

 

div {

display: flex;

justify-content: center;

}

 

img {

width: 200px;

}

 

Here's the HTML:

 

 

<h2>How to Center an Image with the Flex Property</h2>

<p>In this example,  the CSS flex property is used to center the image below. The image is wrapped in a div element. The display property is set to "flex" and justify-content property to "center." The width of the image is then set to a fixed length value.</p>

<div>

<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

 

Here’s how it would look on the front end:

an image centered horizontally with the CSS flex property-1

How to Vertically Center an Image

Centering any element vertically is more difficult than horizontally, but it’s still doable. For the demos below, I’m going to use internal CSS.

Method 1: Using the Position Property

To center an image vertically, you can wrap it in a block element like a div and use a combination of the CSS position property, the left and top properties, and the transform property. 

Step 1: Start by setting the position of the div containing the image to absolute so that it’s taken out of the normal document flow.

Step 2: Set the left and top properties to 50%. This tells the browser to line up the left and top edge of the div containing the image with the center of the page horizontally and vertically (ie. 50% to the right and down the page). 

Here’s the problem: having the edges of the div lined up in the middle of the page will make the div look off-center.

That’s where the CSS transform property comes in. 

Step 3: To truly center the div containing the image, you can use the translate() method to move the div along the X- and the Y-axis. Specifically, you want to move the div 50% to the left and up from its current position so that the center of the image lines up with the center of the page. To move left and up, you’ll need to use negative values.

Here’s the CSS:

 

 

   .center {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

Here’s the HTML:

 

 

   <h2>How to Center an Image Vertically</h2>

<p>In this example, the image is wrapped in a block element (a div, specifically). The div is styled with the position, left, top, and transform properties to center the image  below. </p>

<div class="center">

<img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg" width="200" height="140">

</div>

 

Here’s how it would look on the front end:

Image centered vertically and horizontally with position property

Method 2: Using the Flex Property

Step 1: To center an image horizontally and vertically with Flexbox, start by wrapping it in a block element like a div. 

Step 2: Define this div as a flex container by setting the display property to “flex.”

Step 3: Define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the image within the div) vertically and horizontally.

Step 4: Set the height of the HTML, body, and parent container to 100%.

Here’s the CSS:

 

 

   html,

body {

  height: 100%;

}

.parent {

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

Here’s the HTML:

 

 

   <div class="parent">

  <img src="https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg">

</div>

 

Here’s how it would look on the front end:

Image centered vertically with Flex property

Creating Your Layouts

With a bit of coding knowledge, you can bring a sense of symmetry and balance to your site with center aligned images, texts, and buttons. Knowing how to align these elements will help you control and customize your layouts for a professional look that your website visitors will enjoy.

Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.

New Call-to-action

 css introduction

Originally published Nov 13, 2020 7:00:00 AM, updated February 19 2021

Topics:

Bootstrap & CSS