3 Ways To Center Elements In CSS

#javascript #css #webdev #html

Web developers come across many instances in everyday life where they have to center the elements. It is also very common and important concept that is asked during interviews. So today I would like to list out my favorite three ways of centering the things using CSS.

We have two div elements one inside the other. Outer div has id=’container’ and the inner container has a id = ‘content’. And inside it we have an icon.

<div id="container">        
  <div id="content">   
     <i class="fa fa-beer" style="font-size:24px"></i>       
  </div>      
</div>

1 . Using Flexbox

We can use flexbox to center the element. For this we assign display property to flex. For centering items, we are using properties justify-content and align-items and assigning it to center.

#container {
  background: #eee;
  height: 500px;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  background: pink;
  height: 100px;
  width: 200px;

  display: flex;
  justify-content: center;
  align-items: center;
}

2. Using Grid

Centering the elements using grid is one more efficient way. We can use display property to make use of grid. The place-items property is made use to bring the element to center.

#container {
  background: #eee;
  height: 500px;
  width: 100%;
  position: relative;

  display: grid;
  place-items: center;
}

#content {
  top: 50%;
  background: pink;
  height: 100px;
  width: 200px;

  display: grid;
  place-items: center;
}

3. Using Position Property

Another way is old- age method of using position property to center the things. We have used margin, top, right, bottom and left properties for position.

#container {
  background: #eee;
  height: 500px;
  width: 100%;

  position: relative;
}

#content {
  top: 50%;
  background: pink;
  height: 100px;
  width: 200px;

  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;
  /* to align the icon */
  text-align: center;
  line-height: 120px;
}

Top comments (7)

Utkarsh Dhiman • Nov 27 '20 • Edited

A slight variation in third:


#content{
 /*align content to parent element*/
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /*for content inside current element set line-height = height of element*/
 text-align: center;
}