CSS Layout - Horizontal and Vertical Alignment

element centered

horizontally and vertically centered elements

center the element

To horizontally center a block element (such as <div>), please use margin: auto;.

Setting the element's width will prevent it from extending to the edge of the container.

Then, the element will occupy the specified width, and the remaining space will be evenly distributed between the two outer margins:

This div element is centered.

Example

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 20px;
}

Try it yourself

Note:If not set width attribute (or set it to 100%), centering will be invalid.

center the text

If you only want to center text within an element, please use text-align: center;:

This text is centered.

Example

.center {
  text-align: center;
  border: 3px solid green;
}

Try it yourself

Tip:For more examples on how to align text, see CSS Text This chapter.

center the image

If you want to center an image, please set the left and right outer margins to autoand set it to a block element:

Example

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Try it yourself

Left and right alignment - use position

Another method to align elements is to use position: absolute; :

This div is right-aligned.

Example

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 20px;
}

Try it yourself

Note:Absolutely positioned elements will be removed from the normal flow and may overlap other elements.

Left and right alignment - use float

Another method to align elements is to use float Property:

Example

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Try it yourself

Note:If an element is taller than its containing element and it is floated, it will overflow its container. You can use clearfix hack to solve this problem (see the example below).

clearfix Hack

Then we can add overflow: auto;To solve this problem:

Example

.clearfix {
  overflow: auto;
}

Try it yourself

Vertical alignment - use padding

There are many ways to vertically align elements in CSS. A simple solution is to use the top and bottom inner margins:

I am vertically centered.

Example

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Try it yourself

To align both vertically and horizontally at the same time, use padding and text-align: center;:

I am horizontally and vertically centered.

Example

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Try it yourself

Vertical alignment - use line-height

Another trick is to useits valueequals height The value of the property line-height Property:

I am horizontally and vertically centered.

Example

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}
/* If there are multiple lines of text, add the following code: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Try it yourself

Vertical alignment - use position and transform

If your choice is not padding and line-heightIf another solution is needed, position and transform Property:

I am horizontally and vertically centered.

Example

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}
.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Try it yourself

Tip:You will be in 2D Transformations In this chapter, you will learn more about the transform property.

Vertical Alignment - Using Flexbox

You can also use flexbox to center content. Note that IE10 and earlier versions do not support flexbox:

I am horizontally and vertically centered.

Example

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

Try it yourself

Tip:You will be in my CSS Flexbox You will learn more about Flexbox in this chapter.