DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sanchithasr
Sanchithasr

Posted on • Updated on

3 Ways To Center Elements In CSS

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

Top comments (8)

Collapse
 
utkarshdhiman48 profile image
Utkarsh Dhiman • Edited on
  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
yajanbasel

Thanks.

Collapse
 
sanchithasr profile image
Sanchithasr Author

😊

Collapse
 
easyvipin profile image
Vipin Chandra

This was so much helpful.

Collapse
 
sanchithasr profile image
Sanchithasr Author

πŸ™‚

Collapse
 
sanchithasr profile image
Sanchithasr Author

πŸ‘
Yes. Will note this too

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!