How to center horizontally div inside parent div

Variety in technique: Other centering strategies

There's more than one way to center a kitten...erm...I mean a div! Here are some alternatives for keeping your child in that sweet center spot, even when the parent div's width keeps running off to buy milk and never coming back.

Flexbox solution: For the modernists

The power of Flexbox in CSS3 cannot be understated. Behold, the centering magic:

.parent-div {
  display: flex;
  justify-content: center; /* Aligns child div just like the last slice of pizza in the box...wait, who took my pizza? */
}

.child-div {
  /* Your styles here */
}


Inline-block with text-align: For the classics

If inline elements are more your jam, try the text-align: center; rhythm for the parent and set the child to display: inline-block;. Sounds like a rad '80s pop duo:

.parent-div {
  text-align: center; /* Parent says, "Kids, line up!" */
}

.child-div {
  display: inline-block; /* Child says, "Okay, Mom/Dad!" */
  /* additional styles go here (perhaps some glittery shoulder pads?) */
}


Watch out for the width: For the careful ones

Ensure that the parent div has a defined width (width: 100%;) to get a solid context for centering:

.parent-div {
  width: 100%; /* or any specific width (just like my love for CSS) */
}


By understanding and applying these techniques, you can ensure your child div sits pretty in the heart of its parent, no matter the width.

Responsive design: The Art of the (Centering) Deal

When designing responsively, centering might give you some headaches. Here's how to soothe the pain:

Flex factors: Prevent shrinking

Within flex-containers, use flex-shrink: 0; to ensure your child divs don't shrink out of fear, no matter the screen size:

.child-div {
  flex-shrink: 0; /* "I won't shrink under pressure!" 💪 */
}


Media queries: Personal stylist for every device

Use media queries to tweak the centering style according to the demanding whims of different viewport divas:

@media screen and (max-width: 768px) {
  .parent-div {
    /* Re-adjust centering for smaller screens (like tiny tutus for performing fleas) */
  }
}


Grid layout: Another centering superstar

CSS Grid layout is also a star player for horizontal alignment:

.parent-div {
  display: grid;
  place-items: center; /* Everything in its place, and a place for every 'div' */
}

.child-div {
  /* It's show time! */
}


Accessibility: Don't forget inclusive centering

Ensure your centered elements are accessible as a fox - clever, agile, and reads well on assistive tech. Use semantic HTML and ARIA roles intuitively and keep content readability and navigation in mind.