CSS: centering block elements

So I have a bunch of elements that need to have a specific width, height and padding and need to be centered within their parent element:

<div class="pages">
    <a>Page 1</a>
    <a>Page 2</a>
    <a>Page 3</a>
</div>

How do I do this? I don't know how many elements there will be so .pages can'开发者_JS百科t have a defined width so margin:auto; won't work.

In the stylesheet or style tag:

margin-left: auto; margin-right: auto

You can wrap all those in one single div and center this one, this will be the usual approach I believe.

<div id="wrapper" style="margin-left:auto; margin-right:auto">
  <div id="page1"> ... </div>
  <div id="page1"> ... </div>
  ...
</div>

If you have working code, please post it.

It sounds like what you're looking for is margin: auto on the elements you want to center, like so:

#my_div {
  margin: auto;
}

CSS CODE

div {
 display:table-cell;
 width: 200px;
 height: 200px;
 vertical-align:middle;
 background: red;
}

HTML CODE

<div>
    Hello...This is Vertically Centered!
</div>
<div>
    Hello...2!
</div>
<div>
    Hello...3!
</div>

SAMPLE DISPLAY