CSS – Centering a div without setting the width

The Problem: You want to center a div without setting a width on it because you have text being pulled in dynamically. The length of the text may be out of your control. For example, this could be for a CMS (Content Management System) and the user is entering in an unknown amount of text in the field. So you want to have it expand AND stay centered.



So what’s happening is that you’re containing the content you want to center in two divs, an outer div and an inner div. You float both divs so that their widths automatically shrink or expand to fit your content. Then, you relatively position the outer div with it’s right edge in the center of the container. Finally, then, you relatively position the inner div in the opposite direction by half of its own width. So, when you inspect the element, you’ll see that they are, basically, overlapping each other. That will center the content in the container it’s in. (tightcss.com)

  • Mike Owen

    Thank you! Worked a treat!