DEV Community

loading...

3 Ways To Center Elements In CSS

sanchithasr profile image Sanchithasr Updated on ・2 min read

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.

Centered Elements

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>
Enter fullscreen mode Exit fullscreen mode

Centered Elements

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide
Collapse
utkarshdhiman48 profile image
Utkarsh Dhiman
  1. 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;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
sanchithasr profile image
Sanchithasr Author

Thank you . Will note that. 😊

Collapse
yajanbasel profile image
Collapse
sanchithasr profile image
Collapse
easyvipin profile image
Vipin Chandra

This was so much helpful.

Collapse
sanchithasr profile image
Collapse
sanchithasr profile image
Sanchithasr Author

👍
Yes. Will note this too