CSS Horizontal and Vertical Alignment

Aligning things in CSS is the most common problem that developers generally face.

In this CSS tutorial, we will discuss the most common and easiest ways to align elements both horizontally as well as vertically. We will also discuss a few methods to perfectly center an element in its container.

CSS has several such properties which can be used for aligning purposes. Let’s discuss each property in detail:

A Horizontally Centered Element

Align Text Using text-align Property

CSS text-align property is used to align text horizontally within its container. It can accept any of the following values:

• left – Align text to the left. This is the default.
• right – Align text to the right
• center – Align text in the center

This text is center aligned

Example:

p{
  text-align: center;
}

Note: The text-align property only aligns the element’s inner content, not the whole element.

Center Align Using Margin Auto

This is the most effective and easiest way to align the elements horizontally. In this method, we take help of the margin: auto; to center elements horizontally.

Here is the explanation:

If we set the margin property to auto for an element, the browser automatically calculates the margin for each side. In simple words, the element first takes up the specified width, and then the remaining space is equally divided between the left and right margin by the browser. Therefore, the element always stays in the center of the container.

To center align an element using margin: auto; follow the below steps:

1. Set element’s width in %
2. Set margin property to auto

Center aligned <p> element

Example:

p{
  width: 40%;
  margin: auto;
}

Left and Right Alignment Using Float Property

CSS float property can also be used to align items left or right.

An element having float:right; floats to the right side of its parent container. The rest of the elements flow normally in the remaining left side space. See the example below:

Example:

div{
  float: right;
}

Right Align Using Position Property

CSS position property can also be used to left or right align elements within their container. Even you can position an element anywhere in the layout using the position property.

Here, we are using position: absolute; to right align an element within its container.

Follow the below steps to align an item to the right:

1. Set position property to absolute.
2. Set width of the element.
3. Set any value to the right property(like right: 0px;, right: 10px;, etc)

Example:

div{
  position: absoulte;
  right: 0px;
}

Vertically Center Using Padding

CSS padding property can be used to vertically center an element. All you need to do is, set the same value for the padding-top and padding-bottom property, and the element will be centered vertically. See the element below:

Hey, I am Vertically Centered.

Example:

div{
  padding-top: 100px;
  padding-bottom: 100px;
  border: 2px solid blue;
}

Perfect Center Using Padding and Text Alignment

In the last example, we used the padding property to vertically center an element. Now, If we use text-alignment: center; along with a same value of the padding-top and padding-bottom property, the element will be perfectly centered automatically. See the element below:

Hey, I am perfectly centered.

Example:

div{
  padding-top: 100px;
  padding-bottom: 100px;
  text-align: center;
  border: 2px solid blue;
}

Perfect Center Using Line Height

CSS line-height property can also be used to align elements vertically. This property can also be used to perfectly center an element.

If an element has its height equals to its line-height, It will be vertically centered. So, to perfectly center an element, we can use text-align: center; along with the line-height property.

Hey, I am perfectly centered.

Example:

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

Perfect Center Using CSS Flexbox

CSS flexbox is the easiest way to perfectly center an element (or its content).

You have to follow below steps to align an element using CSS flexbox:

1. Set display property to flex
2. Set element’s height
3. Set the justify-content property to center – It centers the element horizontally
4. Set the align-items property to center – It centers the element vertically

Perfectly centered Using Flexbox

Example:

div{
  display: flex;
  height: 200px;
  justify-content: center;
  align-items: center;
}