How to center an image in HTML

In this HTML tutorial, I show you three different ways to center an image on a web page:

Using inline CSS with display: block and margin: auto
Using CSS in the [style] tag targeting the [img] element
Using the old [center] tag (still works, but outdated)

You’ll also learn why the display property matters when centering elements, and which method is recommended for modern web design. This tutorial is beginner-friendly and a great follow-up if you’re learning HTML & CSS basics.

⏱️ Timestamps:
00:01 – Intro: what we’ll cover
00:47 – Adding an image [img src="lion.jpg"]
01:08 – Method 1: Inline CSS (display block + margin auto)
02:37 – Method 2: CSS in [style] tag
03:54 – Method 3: Using the [center] tag (legacy method)
04:53 – Why [center] is outdated but still works
05:12 – Wrap-up and best practices

🏷️ Tags
center image in html,html tutorial for beginners,html css image alignment,how to center image css,center tag html,img center css,align image html,web design tutorial,css display block margin auto,html beginners guide,front end development basics