CSS Horizontal & Vertical Align

In this tutorial you'll learn how to horizontal and vertical align HTML elements via CSS.

Horizontal Align

To horizontally center a block element having a specific width, such as a <div> element, use margin: auto;. The element will then occupy the specified width, with the remaining space evenly distributed between the left and right margins:

div {
  margin: auto;
  width: 150px;
  border: 1px solid blue;
  padding: 20px;
}

Preview of the above example is given below, where the div element will center align horizontally inside the parent container.

Note: Center aligning has no effect unless the width property is set to a value less than 100%.

Center Align Text

To horizontally center the text inside an element, use text-align: center;.

div {
  text-align: center;
  border: 2px solid blue;
}

Center an Image

To horizontally center an image, set the left and right margins to auto and make it a block element.

img {
  display: block;
  margin: 25px auto;
  width: 70%;
}

Left and Right Align - Using Position

You can left and right align elements by using position: absolute;, as shown below.

.align-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
}
.align-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
}

The blue boxes below represent the above div elements having classes .align-left  and .align-right .

Note: Absolutely positioned elements are removed from the normal flow and can overlap other elements.

Left and Right Align - Using Float

Another way to align elements is by using the float property, as shown below.

.align-left {
  float: left;
}
.align-right {
  float: right;

In this example, the classes .align-left and .align-right are assigned to the image elements, and you can see the preview below.

To learn more about CSS Float Property, check our previous tutorial: CSS Float and Clear Properties

Vertical Align

Center Vertically - Using Padding

There are various methods to vertically center an element in CSS. One straightforward approach is to use equal top and bottom padding.

div {
  padding: 30px 10px;
  border: 2px solid blue;
}

To center an element both vertically and horizontally, use equal padding along with text-align: center.

div {
  padding: 30px 0;
  border: 2px solid blue;
  text-align: center;
}

Center Vertically - Using Line-Height

Another method is to use the line-height property with a value equal to the element’s height. If the text element consists of multiple lines then set its display property to block and vertical align property to middle.  Note that you also need to set a separate line height for it to make it display properly.

div {
  line-height: 100px;
  height: 100px;
  border: 2px solid blue;
  text-align: center;
}
p {
  line-height: 1.3;
  display: inline-block;
  vertical-align: middle;
}

In this example, the line height of the parent div element is set equal to its height. So, the inside p element is aligned vertically in the center.

Center Vertically - Using Position & Transform

If padding and line-height are not feasible, another approach is to use positioning along with the transform property.

div {
  height: 100px;
  position: relative;
  border: 2px solid blue;
}
p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center Vertically - Using Flexbox

You can also use Flexbox to center elements. However, be aware that Flexbox is not supported in Internet Explorer 10 and earlier versions.

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  border: 2px solid blue;
}