CSS Layout - Horizontal and Vertical Align

CSS Align: In CSS we align items horizontally and vertically. Different strategies and methods are used to center them, take care of the left and the right margin, and so on

In this tutorial, you will learn-

In this article, you will learn-

1 Center Align Elements
2 Center Align Elements
3 Center Align Text
4 Center an Image
5 Left and Right Align – Using position
6 Left and Right Align – Using coast
7 The clearfix Hack
8 Center Vertically – Using padding
9 Center Vertically – Using line-height
10 Center Vertically – Using position & transform
11 Center Vertically – Using Flexbox

Center Align Elements

To horizontally center a book element (like <div>), use margin: auto;

Setting the width of the element will keep it from stretching out to the edges of its container.

The element will then, at that point take up the specified width, and the remaining space will be split similarly between the two margins:

Center Align Elements

To horizontally center a block element (like div), use margin: auto;

Hello World!

Example

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #145da0;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p>Hello World!</p>
</div>

</body>
</html>

Note: Center aligning has no effect if the width property isn’t set (or set to 100%).

Center Align Text

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>

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

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

Example

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

Left and Right Align – Using position

One technique for aligning elements is to use position: absolute; :

Example

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #145da0;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right Align</h2>
<p>An example of how to right align elements with the position property:</p>

<div class="right">
  <p>Learn CSS.</p>
</div>

</body>
</html>

Note: Absolute positioned elements are eliminated from the typical flow, and can overlap elements.

Left and Right Align – Using coast

Another strategy for aligning elements is to use the float property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #145da0;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right Align</h2>
<p>An example of how to right align elements with the float property:</p>

<div class="right">
  <p>Learn CSS.</p>
</div>

</body>
</html>

The clearfix Hack

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the “clearfix hack” to fix this.

Then, at that point we can add the clearfix hack to the containing element to fix this issue:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Center Vertically – Using padding

There are numerous approaches to center an element vertically in CSS. A simple solution is to use top and bottom padding:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Vertically</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>

To center both vertically and horizontally, use padding and text-align: center:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use padding and text-align to center the div element vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Center Vertically – Using line-height

Another trick is to use the line-height property with a value that is equivalent to the height property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Center Vertically – Using position & transform

On the off chance that padding and line-height are not options, another solution is to use positioning and the transform property:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Center Vertically – Using Flexbox

You can likewise use flexbox to center things. Simply note that flexbox isn’t supported in IE10 and earlier versions:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h2>Flexbox Centering</h2>

<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.