How to Center Element in div: A Complete Guide

Introduction

It was always tricky for a web developers to center element in div, especially when you want your design to be responsive and look good on all devices. Whether you want to center text, images, or entire divs, there are various techniques that can be used. In this guide, we’ll explore the most common ways to center elements horizontally and vertically using CSS.

Method 1: Using Positioning

This method is useful when you don’t the width and height of the element. We set the position property of the parent to relative and for the child element we set the position property to absolute and top property to 50% and left to 50%. Then, we use transform: translate(50%, -50%)

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

The CSS property position sets how an element is placed or positions in an element or a document. The properties top, right, bottom and left determine the location of positioned element. For absolute centering, you can use the position property along with transform:

.parent {
  position: relative;
  height: 100vh;
}

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

Method 2: Using Flexbox:

Flexbox layout is most suitable for small-scale layout, where as the Grid layout is appropriate for larger scale layouts. Flexbox has properties for both the parent and child elements. The properties for parent includes: display, flex direction, flex-wrap, flex-flow, justify-content, align-items, align-content, gap, row-gap, column-gap etc. Whereas the properties for child element includes: order, flex-grow, flex-shrink, flex-basis, align-self etc. You can learn Flexbox by playing a fun and interactive game called Flexbox Froggy.

Flexbox is a powerful CSS layout module.  It makes it easy to align and distribute space among items in a container. To center an element both horizontally and vertically, apply the following styles to its parent container:

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

Method 3: Using Grid Layout

CSS Grid Layout uses two-dimensional grid-based layout system. Prior to Grid, tables, floats, positioning and inline-blocks were used. Grid is considered to be very first CSS module to solve the layout problems. CSS Grid Layout can be used to create complex, responsive web design grid layouts. It is another excellent tool for centering content. By defining a grid container, you can easily center items inside it:

The most commonly used properties for parent includes: display, grid-template-columns, grid-template-rows, grid-template-areas, grid-template, column-gap, row-gap, grid-column-gap, grid-row-gap, gap, grid-gap, justify-items, align-items, justify-content, align-content, place-items, place-content, grid-auto-columns, grid-auto-rows etc. On the other hand, properties for child includes: grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area, justify-self, align-self, place-self etc.

.parent { 
display: grid; 
place-items: center; 
height: 100vh;/*Full viewport height */ 
}

Method 4: Using Margin Auto

For beginner, understanding how to center element in div, is a valuable skills. By learning this, you can prevent your content from stretching out to edges. It is the most traditional method to center element in div. margin: auto is always considered to be a classic technique for simple horizontal centering. It’s particularly useful for centering block-level elements like divs:

.centered-div {
  width: 50%;
  margin: 0 auto;
}

Conclusion

Centering elements in CSS is a fundamental skill every developer should know. Whether you use Flexbox, Grid, margin: auto, or positioning, each method has its advantages depending on the context. Experiment with these techniques to find the one that best suits your design needs. Mastering these will help you create visually appealing, responsive layouts that enhance user experience.

P.S.: A thoroughly compiled comprehensive list of top 10 CSS Libraries you should know as web developer which can save your time and effort.