vayola pradeep

Posted on Aug 23, 2023

Demystifying CSS: How to Center a Div for Perfect Layouts

#webdev #beginners #tutorial

How to Center a Div for Perfect Layouts

Centering a div might seem like a puzzle, but it's an essential technique for creating beautifully balanced web designs. Follow these 3 ways you can center a div:

Using horizontal centering
Using vertical centering
Using horizontal & vertical centering

Horizontal centering

Horizontal centering of a div element in CSS can be achieved using various methods. Here are a few commonly used techniques:

1.Using Auto Margins:

In this method, setting both the left and right margins to "auto" will automatically center the div horizontally within its parent container. The width property can be adjusted as required.

HTML

<div class="center">
  codewithvayola
</div>

CSS

.center {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* Adjust the width as needed */
  background-color:yellow;
}

2.Using Flexbox:

With Flexbox, setting display: flexon the parent container and justify-content: center will center the child div horizontally within the parent.

HTML

<div class="center">
  codewithvayola
</div>

CSS

.center {
  display: flex;
  justify-content: center;
  background-color:yellow;
}

3.Using Grid:

Using CSS Grid, applying display: grid to the parent container and place-items: center will center the child div horizontally.

HTML

<div class="center">
  codewithvayola
</div>

CSS

.center {
  display: grid;
  place-items: center;
  background-color:yellow;
}

4.Using Text-Align:

For inline or inline-block elements within a div, you can center them horizontally using text-align: center applied to the parent div.

HTML

<div class="center">
   <p>codewithvayola</p>
</div>

CSS

.center {
  text-align: center;
  background-color:yellow;
}

Vertical centering

Vertical centering of a div element in CSS can be achieved using various methods. However, vertical centering can sometimes be a bit trickier than horizontal centering due to the behavior of block-level elements. Here are a few commonly used techniques:

1.Using Flexbox:

With Flexbox, setting display: flex on the parent container and using justify-content: center and align-items: center will center the child div both horizontally and vertically within the parent. The height of the parent can be adjusted as required.

HTML

<div class="center">
  <div class="content">
    codewithvayola
  </div>
</div>

CSS

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust the height as needed */
  background-color:yellow;
}

.content {
  /* Add styles to your content here */
  background-color:red;
}

2.Using Grid:

Using CSS Grid, applying display: grid to the parent container and using place-items: center will center the child div both horizontally and vertically within the parent. The height of the parent can be adjusted as required.

HTML

<div class="center">
  <div class="content">
    codewithvayola
  </div>
</div>

CSS

.center {
  display: grid;
  place-items: center;
  height: 100vh;  /* Adjust the height as needed */
  background-color:yellow;
}

.content {
  /* Add styles to your content here */
  background-color:red;
}

3.Using Absolute Positioning:

Using absolute positioning, you can center the child div vertically by setting its top to 50% and using transform: translateY(-50%) to adjust its position.

HTML

<div class="center">
  <div class="content">
    codewithvayola
  </div>
</div>

CSS

.center {
  position: relative;
  height: 100vh; /* Adjust the height as needed */  
  background-color:yellow;
}

.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color:red;
  /* Add styles to your content here */
}

Vertical & Horizontally centering

You can use a combination of Flexbox or CSS Grid to center a div both horizontally and vertically. Here's how you can achieve that:

1.Using Flexbox:

HTML

<div class="center">
  <div class="content">
    codewithvayola
  </div>
</div>

CSS

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust the height as needed */
  background-color:yellow;
}

.content {
  /* Add styles to your content here */
  background-color:red;
}

2.Using Grid:

HTML

<div class="center">
  <div class="content">
    codewithvayola
  </div>
</div>

CSS

.center {
  display: grid;
  place-items: center;
  height: 100vh;  /* Adjust the height as needed */
  background-color:yellow;
}

.content {
  /* Add styles to your content here */
  background-color:red;
}