Categories
alignment centering css html

How to horizontally center an element

4877

How can I horizontally center a <div> within another <div> using CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

2

  • 33

    Of those great answers, I just want to highlight that you must give “#inner” a “width”, or it will be “100%”, and you can’t tell if it’s already centered.

    – Jony

    Nov 7, 2017 at 8:22

  • display:flex; is the easiest to remember (Chrome gives you guides in DevTools) and supports centering on both axes.

    Feb 10 at 5:39

5350

You can apply this CSS to the inner <div>:

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

Of course, you don’t have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), 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;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

EDIT

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {  
  border: 0.05em solid black;
}

#outer {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

To align the div vertically centered, use the property align-items: center.

18

  • 17

    For the vertical centering I usually use “line-height” (line-height == height). This is simple and nice but it’s only working with a one line content text 🙂

    Jun 23, 2010 at 12:36

  • 116

    You have to use the !DOCTYPE tag on your html page to make it work well on IE.

    – Fabio

    Jan 28, 2012 at 14:23

  • 19

    Note that it may be necessary to add “float:none;” for the #inner.

    Sep 27, 2013 at 8:30

  • 21

    You also set the top and bottom margins to 0, which is unrelated. Better putting margin-left: auto; margin-right: auto I think.

    Feb 8, 2014 at 22:45


  • 18

    Not necessarily margin:0 auto: it can be margin: <whatever_vertical_margin_you_need> auto second being the horizontal margin.

    – YakovL

    May 3, 2016 at 19:07


1371

If you don’t want to set a fixed width on the inner div you could do something like this:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

That makes the inner div into an inline element that can be centered with text-align.

2

  • 17

    @SabaAhang the correct syntax for that would be float: none; and is probably only needed because #inner has inherited a float of either left or right from somewhere else in your CSS.

    Nov 12, 2015 at 9:21

  • 10

    This is a nice solution. Just keep in mind that inner will inherit text-align so you may want to set inner’s text-align to initial or some other value.

    – pmoleri

    Nov 18, 2016 at 21:52

437

The best approaches are with CSS3.

The old box model (deprecated)

display: box and its properties box-pack, box-align, box-orient, box-direction etc. have been replaced by flexbox. While they may still work, they are not recommended to be used in production.

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

According to your usability you may also use the box-orient, box-flex, box-direction properties.

The modern box model with Flexbox

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Read more about centering the child elements

And this explains why the box model is the best approach:

2

  • 6

    Safari, as of now, still requires -webkit flags for flexbox (display: -webkit-flex; and -webkit-align-items: center; and -webkit-justify-content: center;)

    Jul 23, 2015 at 15:59

  • I always think that use lots code is bad practice for example with this code I center my div: display: table; margin: auto; simple and easy

    – simon

    Nov 4, 2019 at 18:11