How to center a floating HTML div with variable width

Hi! I know I have been away from the blog for a long time, but I decided to wipe off a little of dust and write some small things that I have been doing here.
Recently I have been working and learning lots of new and cool things, some of them are simple, some are not so trivial, but many of them could be quite useful for a bunch of people out of there, including myself! I mean, I decided to restart writing small tutorials on some simple things that I usually do, like the one I wrote about how to install the new JDK release candidate on Linux.
Ever since I wrote it, many times I had to come back here to recheck one or another detail of some command, when I wanted to install a version of JDK that was not available on the Ubuntu repositories.

So, today I will write down how to center a floating div with variable width…. A what? Portuguese English please!

Nowadays it is very common to see on websites a small notification on the top of the screen, like those:

Notification

I first saw these things on Google applications like GMail, but they are very nice anyways, because they avoid the use of (grr!) pop-ups (grr!) when there’s the need to notify the user about something. That’s probably why they are becoming each time more popular.

Anyway, this is basically a div or a span, centered on the screen or whatever other container contains it.
Usually to center something it is enough to use

margin: 0 auto;

But in this case we don’t know how wide the div should be, as it depends on the text it will show, which is dynamically provided by some programming language.
So my notification div class does not have a ‘width’ attribute and is displayed as an inline element:

.notification {
  display: inline;
}

In this case setting the margin to auto won’t work, so what to do?
I wanted to center my notification div in relation to the screen, so I created two divs:

<div class="container">
  <div class="notification">
   Here goes my notification message
  </div>
</div>

And my CSS:

.container {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
}

.notification {
  display: inline;
}

Basically we insert the notification div inside a container that occupies the whole area in which the div is to be centered, and set text-align: center.

I know it is very simple but it is not always obvious 🙂