How to Centre an Image with CSS

How to Horizontally Centre (Center) a Picture

How to Centre an Image with CSS

by Christopher Heng,

This article deals with how you can put an image in the centre ("center" in US English) of a web page, along its horizontal axis, using CSS.


I will assume in this article that you have some basic knowledge of HTML and CSS, and know how to insert CSS code into a web page.

If this is not true, and you normally use a visual (or WYSIWYG) web editor to design your website, you may want to look at one of my tutorials for those editors. You can usually find information on how to insert and centre an image in chapter 2 of the main tutorial series for that editor.

Steps to Horizontally Centring an Image

The standard method for centring ("centering") a picture with CSS is as follows:

  1. Make the <img> tag in question into a block level tag.

  2. Specify a width that is less than 100% of the width of the container holding the image.

    In this context, when I say container, I mean the space into which the image is placed. For example, if your image is inserted in one of the columns of a two column page, then the container is that column. If it is placed within a box (like the box that you see around this paragraph), the container is the box. Otherwise, if the image is not enclosed within another block tag at all, the container is the entire web page. The width must be less than the container's width, since centring only makes sense if the object is smaller than the enclosing space.

  3. Set the left and right margins to auto.

Take the following HTML code as an example. Note that for the purpose of this tutorial, I have omitted attributes on the <img> tag that you will normally add but that are irrelevant to our discussion.

<img src="demo.png" id="demo">

If the image has a width of (say) 202 pixels, the following CSS code will put it in the middle of the horizontal axis of the container into which it is placed.

#demo {
  width: 202px;
  display: block;
  margin-left: auto;
  margin-right: auto;

All the above properties need to be set. If you don't specify the display: block property, the image will default to being an inline element. Centring only makes sense on things that are block level, else it would be expected to just flow with whatever came before and after. Setting both margins to auto causes the browser to put an equal amount of space on the object's left and right, and this can only be done if its width is known, and is less than 100% of the container's width.


The following image was centred using the CSS code given above. It should appear in the centre of the right column of this page.

Logo for

Browser Support

The above standards-compliant CSS code should work in all current browsers. In fact, it even works in many obsolete browsers, including as far back as Internet Explorer 6 (and probably earlier browsers too).

Copyright © 2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Centre an Image with CSS

Link to Us
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Web Hosting
Perl / CGI
.htaccess / Apache


Free webmasters and programmers resources, scripts and tutorials Free How-To Guides
Site Design Tips at
Find this site useful?
Please link to us.