How to Horizontally Center an Element

Centering an element horizontally is a common task in web design and development. It comes up in many different situations, such as when you want to center a button, a form or a logo. Every part of a layout or design may have elements that need horizontal centering.

There are a few different methods you can use to accomplish this, each with its own advantages and disadvantages and times when you might want to use it. In this guide, we’ll go over how to center an element horizontally using HTML and CSS!

Using margin: auto

To horizontally center an element using CSS, the first thing you need to do is set the element’s margin to auto. This will evenly distribute the space around the element, pushing it to the center of its container. For this to work, you’ll need to set the width of the element to a fixed value. Otherwise, the element will stretch to fill the entire width of its container and won’t be centered.

  <style>
  /* Set the margin to auto */
  .centered-element {
    margin: 0 auto;
    width: 200px;
    border: solid 1px #000;
    padding: 20px;
    text-align: center;
  }
  </style>

  <div class="centered-element">
    <p>This element is centered!</p>
  </div>

The margin: auto approach will work for elements that have a display: table set. Let’s check out what this looks like.

  <style>

  .centered-table-element {
    margin: 0 auto;
    display: table;
    border: solid 1px #000;
    padding: 20px;
  }
  </style>

  <div>
    <span class="centered-table-element">This block is centered!</span>
  </div>

Using text-align: center

Another method you can use to center an element horizontally is to use the text-align CSS property. This property allows you to align text within an element.

Keep in mind that your element must have a fixed with or be a block element. Otherwise the text will not be able to be centered because the element that contains it doesn’t go all the way to the edges of its container.

  <style>

  .centered-text-element {
    text-align: center;
  }
  </style>

  <div class="centered-text-element">
    This text is centered!
  </div>

You can use text-align: center to center elements as well, if you set it on the parent element and the child element is has a display property of inline-block or it is a block element and the text-align property is inherited down from the parent.

  <style>

  .centered-parent-element {
    text-align: center;
  }

  .centered-child-element {
    display: inline-block;
  }
  </style>

  <div class="centered-parent-element">
    <span class="centered-child-element">This block is centered!</span>
  </div>

Using transform

The transform property and the translate function allows you to move an element horizontally by a certain number of pixels or percentage of its container.

A width value on the contain that you are horizontally centering is often useful, as again, a block element always spans 100% across the container that it occupies. You need a width to allow the centering to actually occur.

The useful snippets to know are that transform: translateX(-50%) will move the element 50% to the left of it’s relative space. left: 50% will move it back, effectively centering the element in place.

Keep in mind that in order to use the left property, you need to set the position property to anything other than position: static. You typically would want to use relative and absolute.

  <style>

  .centered-transform-element {
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    border: solid 1px #000;
    padding: 20px;
    max-width: 250px;
  }
  </style>

  <div class="centered-transform-element">
    This block is centered!
  </div>