Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 20, 2022 05:46 am GMT

6 ways to center a div

Yeah, I know we all have struggled with this situation. We want to center a div or child inside the parent element, but sometimes it won't work or it's hard to do. So now let me introduce to you 6 ways by which you can center a div mostly in every situation.

Problem

We have 2 divs parent and child and we need to center child with respect to the parent.

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

Goal - It should look like this

Now we know what we want to achieve. So let's see what are the possible solutions for this problem.

1. Using Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure.

Apply the following properties to .parent will center .child horizontally and vertically.

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

codepen

2. Using Position

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). We only need relative and absolute.

Apply following properties to .parent and .child will center .child horizontally and vertically.

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

codepen

3. Using CSS grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns. we can center the child element with this as well.

Apply following properties to .parent will center .child horizontally and vertically.

.parent {      display: grid;      justify-content: center; /* Horizontal */      align-content: center; /* Vertical */  }

codepen

Also there's one other way to use the Grid you can apply the following properties to .parent.

/* Another Approach */.parent {      display: grid;      place-items: center;  }

codepen

4. Using margin: auto on a flex item

Flexbox introduced a pretty awesome behavior for auto margins. Now, it not only horizontally centers an element as it did in block layouts, but it also centers it in the vertical axis.

Apply following properties to .parent will center .child horizontally and vertically.

.parent{     display:flex; }  .child {     margin:auto;  }

codepen

5. Pseudo-elements on a flex container

Not the most practical approach in the world, but we can also use flexible, empty pseudo-elements to push an element to the center.

Apply following properties to .parent will center .child horizontally and vertically.

.parent {     display: flex;     flex-direction: column;  }  .parent::before, .parent::after {     content:  "";     flex:  1;  }  .child {      /* ...other CSS */     margin: 0 auto;  }

codepen

6. margin: auto on a grid item

Similarly to Flexbox, applying margin: auto on a grid item centers it on both axes.

.parent {     display: grid;  }  .child {     margin:  auto;  }

codepen

Conclusion

These are not the only solution or the ways to center a child. There are many other ways to achieve the same thing, But I know only these so I shared them with you. If you have any other way, then feel free to drop your thoughts.

You can now extend your support by buying me a Coffee.

Buy Me A Coffee

Also Read


Original Link: https://dev.to/j471n/6-ways-to-center-a-div-5fgj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To