Centering a div block without the width

Different flavors of centering

Display party: Inline-block and text-align

It's possible to center a div that snuggly adapts to its content. Just set its display to inline-block; and throw it in the midst of a parent div that loves to text-align: center;:

<div style="text-align: center;">
  <!-- Here's our middleman, mid-div. Get it? 😝 -->
  <div style="display: inline-block; background: lightblue;">I'm in the middle!</div>
</div>


This method comes in handy for a flexible layout without a rigid width.

Juggling with positions and floats

Enter another trick with relative positioning and floats:

<div style="position: relative; float: left; left: 50%;">
  <!-- I told him he should float right. Now he's centered. Good job! 🏀-->
  <div style="position: relative; float: right; right: 50%;">I am content being centered.</div>
</div>


These position and float properties adjust according to content width, just the way you want!

Center stage with display table

You can also centralize using good ol' display: table; for our divs. It enables auto-centering using the margin: 0 auto; combo:

<div style="display: table; margin: 0 auto;">
  <!-- Old-school centering, but a classic never dies. 🧙 -->
  <div style="background: lightblue;">Centered and proud!</div>
</div>


This technique prevails when flexbox is off limits.

Embrace responsive design

When working with liquid layouts, aim for %, em or rem units rather than px to ensure adaptive design.

Know thy enemy: Browser incompatibility

Ensure your chosen CSS centering techniques are compatible across different browsers. Remember flexbox is well-supported, but there are some browser-specific quirks worth noting.

A word of caution

Use px for text only when you don't have a choice. Don't use tables for layouts; this is a bitmap-era habit you should lose. Instead, decide on a centering method based on your content's nature, design preferences, and browser compatibility.