How to horizontally center a
in another
?

Spread the love

Question Description

How can I horizontally center a

within another

using CSS (if it’s even possible)?

Foo foo

Practice As Follows

You can apply this CSS to the inner

:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don’t have to set the width to 50%. Any width less than the containing

will work. The margin: 0 auto is what does the actual centering.

If you are targeting IE8+, it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
}
Foo foo

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.