Return to Answer

Some posters have mentioned the css3 way to center using display:box

This syntax is outdated and shouldn't be used anymore.[See also this post] So just for completeness here is the latest way to center in css3 using the Flexible Box Layout Module

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* optional. only if you want the items to wrap */
    justify-content: center; /* for horizontal alignment */
    align-items: center; /* for vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* optional. only if you want the items to wrap */
  justify-content: center;
  /* for horizontal alignment */
  align-items: center;
  /* for vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
    width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

If you need to support older browsers which use older syntax for flexbox here's a good place to look.

Some posters have mentioned the CSS 3 way to center using display:box.

This syntax is outdated and shouldn't be used anymore. [See also this post].

So just for completeness here is the latest way to center in CSS 3 using the Flexible Box Layout Module.

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

If you need to support older browsers which use older syntax for flexbox here's a good place to look.

Some posters have mentioned the css3 way to center using display:box

This syntax is outdated and shouldn't be used anymore.[See also this post] So just for completeness here is the latest way to center in css3 using the Flexible Box Layout Module

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Here's a LIVE DEMO to play with - [which also takes into consideration browser specific properties.]

NB: This now works in Firefox 22, but for earlier version of FF - you need to enable the flexbox runtime flag like this

This post shows how to get maximum browser support for flexbox and explains some of the peculiar browser-specific properties needed in ie10)

A good place to start when trying to get the syntax right for all browsers is here.

Some posters have mentioned the css3 way to center using display:box

This syntax is outdated and shouldn't be used anymore.[See also this post] So just for completeness here is the latest way to center in css3 using the Flexible Box Layout Module

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* optional. only if you want the items to wrap */
    justify-content: center; /* for horizontal alignment */
    align-items: center; /* for vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* optional. only if you want the items to wrap */
  justify-content: center;
  /* for horizontal alignment */
  align-items: center;
  /* for vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
    width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

If you need to support older browsers which use older syntax for flexbox here's a good place to look.

Some posters have mentioned the css3 way to center using display:box

This syntax is outdated and shouldn't be used anymore.[See also this post] So just for completeness here is the latest way to center in css3 using the Flexible Box Layout Module

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Here's a LIVE DEMO to play with - [which also takes into consideration browser specific properties.]

NB: This now works in Firefox 22, but for earlier version of FF - you need to enable the flexbox runtime flag like this

This post shows how to get maximum browser support for flexbox and explains some of the peculiar browser-specific properties needed in ie10)

A good place to start when trying to get the syntax right for all browsers is http://the-echoplex.net/flexyboxes/

Some posters have mentioned the css3 way to center using display:box

This syntax is outdated and shouldn't be used anymore.[See also this post] So just for completeness here is the latest way to center in css3 using the Flexible Box Layout Module

So if you have simple markup like:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...and you want to center your items within the box, here's what you need on the parent element (.box):

.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Here's a LIVE DEMO to play with - [which also takes into consideration browser specific properties.]

NB: This now works in Firefox 22, but for earlier version of FF - you need to enable the flexbox runtime flag like this

This post shows how to get maximum browser support for flexbox and explains some of the peculiar browser-specific properties needed in ie10)

A good place to start when trying to get the syntax right for all browsers is here.