In CSS, centring an item in div is one of the most difficult aspects because there are lots of ways to center align item inside a div. Although all the methods are very easy to understand but for most of the people, it is a tough task.

In this tutorial, we will be going to learn some of those methods to center align in div.

Center Align in Div horizontally

inline or inline-* elements

We can use text-align property of the CSS to center align a text or link. It is one of the easiest and used methods to center align item in div using CSS.

HTML

<div class="container">
   <p> I am horizontally center paragraph.</p>
</div>

CSS

p {
   text-align:center;
}

block-level Elements

If you need to align a block-level element in the center then you can use the margin property of the CSS. It is also the most used property to centrally align block-level elements.

HTML

<div class="container">
  <div class="centre-aligned-div"></div>
</div>

CSS

.centre-aligned-div {
  margin: 0 auto;
}

Use CSS flex property to center align item

In modern web development, frontend developers are using this property to horizontally center align item in div using the CSS.

HTML

<div class="container">
  <div class="centre-aligned-div"></div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}

But before using this property of the CSS, make sure you check its browser compatibility for your web app.

Center Align in Div Vertically

Aligning an item vertically is really very painful for the frontend developers when they have to use the old CSS methods. But after the introduction of the CSS flex property, developers can easily align item vertically.

Here we will learn both old and new CSS method to align item vertically.

Block-level elements

Element height is known

Frontend developers are using this method for a long time. To use this method, you should know the height of the element.

Here we will write css for parent and child element.

HTML
<div class="container">
  <div class="child"></div>
</div>
CSS
.container {
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}

To truly center align item vertically, you need to give the “half element’s height” negative value as a margin-top to the child element.

Element height is unknown

If element height is unknown for you then you can use this method to center align item vertically.

HTML
<div class="container">
  <div class="child"></div>
</div>
CSS
.container {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

Center Align In Div vertically using flexbox property

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  display: flex;
  align-items: center;
}

Yes, just two lines of code for aligning an item vertically center using the css flex box property.

Center Align In Div Horizontally and Vertically

To align an item center horizontally and vertically, there are different methods available. Here we are going to discuss few of them depending upon the elements height information.

Element height is known

If we know the element height then we can use this method.

In this method, we set display property of the parent element to relative.

And in the child element, we set display property to absolute with 50% value to top and left.

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* negative top and left margins to truly center the element */
}

Element height is unknown

HTML

.container {
  position: relative;
}

CSS

.container {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Center item horizontally and vertically using flexbox property

HTML

<div class="container">
  <div class="child"></div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Conclusion

After reading this article, I hope now you get the clear idean on how to center item vertically and horizontally using the CSS.

You can use any method to center align dive depending upon your requirement.

If you have any doubts or queries then you can comment in the comment box or you can join our Facebook group where you can share your experience or ask any web development related queries.

Codecademy Code Foundations
Pin It