2

I have come across some methods of centering a div within a div, but those usually requires the element to be centered to have a fixed width and height. Is there a way to do it if the inner div to be centered will be of variable width and height (example: centering an image inside a frame of a fixed size, and the image could be of variable width/height)

Adam Crossland
  • 14,198
  • 3
  • 44
  • 54
Extrakun
  • 19,057
  • 21
  • 82
  • 129

5 Answers5

2

horizontal centering can be done with CSS:

#containerDiv {
  text-align:center;
}

#innerDiv {
  margin: 0 auto;
  text-align: left;
}

For vertical centering I use Javascript if the containerDiv doesn't have a fixed height.

Steve Claridge
  • 10,650
  • 8
  • 33
  • 35
  • Note: this won't work on block-level elements without setting a fixed width on the inner container. If you don't know the width of the inner container, set it to display: inline-block and it will be centered properly. The other alternative (if you're not a fan of inline-block) is to use [the technique documented here](http://stackoverflow.com/questions/3206735/centering-a-div-horizontally-with-variable-width-not-working-in-ie/3207432#3207432). – nickb Mar 18 '11 at 00:49
1

The only ways to center variable width in all browsers (that I know of) is with 

<table align="center" cellpadding="0" cellspacing="0"><tr><td><div>This div is variable width and is centered.</div></td></tr></table>

or JavaScript

As for center horizontal that would force you to use JavaScript (I think)

700 Software
  • 85,281
  • 83
  • 234
  • 341
1

IE needs a "text-align: center" on the top-level element.

For example, your body element has "text-align: center", and your container has "margin: 0 auto". Then IE will center it.

You can set back "text-align" to left on your container if you don't want its content centered.

Emilie
  • 11
  • 1
0

Centering the width is easy...you probably already know this, but just set the left and right margin to auto. For height, unfortunately, I've only seen weird positioning work-arounds. You'd think that they'd make a similar margin for top/bottom, but alas, no. I'll try to find a link on the work-arounds.

<div style='width:400px;height:200px;background-color:#CCCCCC;'>
    <div style='margin:0px auto;width:30px;height:30px;background-color:#0000CC;'>&nbsp;</div>
</div>

EDIT: Found link that might help on the vertical part:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Kevin Nelson
  • 7,613
  • 4
  • 31
  • 42
  • Honestly, as much as I like doing css positioning and avoiding tables, when I need something to be vertically aligned in the middle, I still use tables even for non-tabular data rather than the CSS positioning fixes like the link I posted. – Kevin Nelson Oct 27 '10 at 14:07
  • Based on my experience, this doesn't work for IE. IE ignores margin auto setting, and put element at left side. Any comment? – Sheen Oct 27 '10 at 14:08
  • What's your DOCTYPE? The above example works fine with XHTML transitional: – Kevin Nelson Oct 27 '10 at 20:46
  • Also works in IE for XHTML strict, HTML 4.0 transitional, and HTML 5. I can only get it to go to the left by removing the DOCTYPE completely...are you using a DOCTYPE at all? IE is picky about that. – Kevin Nelson Oct 27 '10 at 20:50
0

You could use the display attribute to make a table-cell out of it:

DIV.container {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle }
...
<DIV class="container">
  <P>This small paragraph...
</DIV>

However, this recommendation does not really work for me. But this one does:

https://stackoverflow.com/a/6284195/156481

Community
  • 1
  • 1
acme
  • 14,654
  • 7
  • 75
  • 109