1. Flexbox

Flexbox is an amazing property of css which solves many problems in designing the layouts, centering elements is one of them. 

Html 

<html>
  <body>
    <div class="container">
      <!-- element to center -->
      <div class="element">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>

This is how it looks like without any css.

image.png

css

html,body, .container{
  height: 100%;
}

.container{
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center; /* centers vertically */
}

.element{
  width: 50%;
}

After adding css

image.png

Note: You can also use the align-self property on the element which needs to be centered. Like this

.container{
  display: flex;
  justify-content: center; /* centers horizontally */
}

.element{
  width: 50%;
  align-self: center; /* centers vertically */
}

This will produce the same result

2. Transform

Css transforms are used if you don't know the dimensions of the element. Position: absolute is used with transform to center the element horizontally and vertically.

Html

<html>
  <body>
    <div class="container">
      <!-- element to center -->
      <div class="element">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>

Css

html,body, .container{
  height: 100%;
}

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

3. Margin

Elements that are block elements and have a width defined on them can be centered horizontally by using margin: 0 auto; on it.

Html

<html>
  <body>
    <div class="container">
      <!-- element to center -->
      <div class="element">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
  </body>
</html>

Css

html,body, .container{
  height: 100%;
}

.element{  
  width: 50%;
  margin: 0 auto;
}

This method cannot be used:

  1. to center the elements vertically.
  2. when an element is not a block element.

4. calc()

calc() is used to perform mathematical operations. It can take different types of values such as pixels, percentage, em, etc.

Html

<div class="container">
  <!-- element to center -->
  <div class="element"></div>
</div>

Css

html,body, .container{
  height: 100%;
}

.container{
  position: relative;
}

.element{
  position: absolute;
  width: 100px;
  height: 100px;
  background: blue;
  top: calc(50% - 100px / 2); /* height divided by 2*/
  left: calc(50% - 100px / 2); /* width divided by 2*/
}

Output:

image.png

Note: Do not forget the space between the two values in calc()

5. Grid

Grid is one of my favourite properties in css. There are a lot of things you can do with grid but we are only going to see how to center elements using display:grid;

Html

<div class="container">
  <!-- element to center -->
  <div class="element"></div>
</div>

Css

html,body, .container{
  height: 100%;
}

.container{
  display: grid;
  place-items: center;
}

.element{
  width: 100px;
  height: 100px;
  background: blue;
}

Output: 

image.png

6. Conclusion

Now we know different techniques to center elements using css. You can use different techniques to center the elements for different situations.