How to Center Web Page Elements Horizontally

Centering HTML elements on a web page is a bit tricky. How you center elements depends on the type of element on the web page. There are three different ways to horizontally center elements on the web page, depending on what you want to center.

Is the element you want to center:

1. A text element; for example, a <p>, <h1> or <h2> tags? Go to Centering Text
2. A block element; for example <table>, <form> or <div> tags? Go to Centering Block Elements
3. An inline element; for example an <img> tag? Go to Centering Inline Elements

1. Centering Text

To center text, all you need to do is add text-align: center. It’s that easy. The reason why it is easy is because text elements are set by default to display:block in all browsers. For example, if you would like to center all of the <h1> and <h2> titles on your website, you would simply add this code to your CSS file:

h1, h2{
   text-align: center;
}

If you want to center only some <h1> and <h2> headlines, then you need to add a class, like this (first the HTML and then the CSS):

<h1 class="center-title">This is my Title</h1>

.center-title{
  text-align: center;
}

Center text also works for centering a navigation bar. Assuming that you have your navigation in <nav> and <ul> tags, you would center the navigation like this:

nav ul{
   text-align: center;
}

2. Centering Block Elements

To horizontally center a block element, you need to add margin-left: auto and margin-right:auto to it. To make it easier, use the CSS shortcuts, like margin: 0 auto. Remember the CSS shortcuts? margin: 0 auto is the same as:

margin-top: 0;
margin-left: auto;
margin-bottom: 0;
margin-right: auto;

Some common block elements include <form><table><div><hr>

Say you want to center a form and a table on the website. All you need to do is set the left and right margins to auto.

form, table{
   margin: 0 auto;
}

3. Centering Inline Elements

If centering doesn’t work with margin:0 auto, then you probably are working with an inline element. To center an inline element, you first need to change to to a block element. Images are inline elements, so one that you are likely to need to change to block in order to center it. For example, say you have an image you want to center, start by adding a class to it. You can name the class whatever you want, but a good name may be “center-image”. Then add CSS like this:

img.center-image{
   margin: 0 auto;
   display: block;
}

Frequently Asked Questions

---

Interested in learning more about HTML and CSS? WebDevStudents.com has an online curriculum. You can also register to take classes at Saint Paul College. Register for CSCI1450, Web Fundamentals, a 4-credit course offered online, in Zoom and in person.