Absolute center an element without knowing it's height

Question

I need to center an element (Vertically and horizontally) and while I know it's width, it's height is likely to change.

I've searched Google all morning and everything I've found seems to say that I need to know the height.

Is there a jQuery method I could use, I don't really want to start using the table-cell property

Have you tried anything yourself? Do you even have any markup to work from? — George, May 15 '13 at 10:18
This problem has received serious attention in the past such as http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css/6182661#6182661 as pointed out by @The Mechanic — Marc Audet, May 15 '13 at 10:59
Why would you prefer JavaScript (or worse, jQuery) for vertical centering over the simple, lightweight table-cell property? — cimmanon, May 15 '13 at 12:33

score 0 · Answer 1 · answered May 15 '13 at 10:19

0

You can use jQuery.outerHeight to dynamically fetch an element's height attribute.

answered May 15 '13 at 10:19

doublesharp

26,888
6
52
73

score 0 · Answer 2 · answered May 15 '13 at 10:20

0

You can just use:

$("#whatever").height();

Which will tell you the height of the object. If it changes then you can just call it again and re-center.

answered May 15 '13 at 10:20

PhonicUK

13,486
4
43
62

score 0 · Answer 3 · answered May 15 '13 at 10:25

0

With CSS it's possible with flexible boxes, but it doesn't work on IE yet:

.container{
  display: flex;
  min-height: 100%;  /* <- or whatever height the container has */
}

.centered{
  margin: auto;     
}

(fiddle)

answered May 15 '13 at 10:25

nice ass

16,471
7
50
89

that doesn't work in ie – Rohit Agrawal May 15 '13 at 10:32
Yeah I've noted that in the answer. There is however [flex support in IE 10](http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx), but it seems centering doesn't work for some reason – nice ass May 15 '13 at 10:47
IE10 supports a previous version of Flexbox (March 2012 draft). Your demo has a moz prefix, but Firefox only supports the old 2009 properties with a prefix or no prefix on the standard properties (until v22, enabling experimental Flexbox support is required). https://gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon May 15 '13 at 12:29

Rohit Agrawal · Answer 4 · 2013-05-15T10:44:30.137

you dont need any js for this this is pretty simple

*note that this will work with img like object which have height and width fixed but not know to us and for text u need to use js to run it cross browser correctly

have a look to this fiddle http://jsfiddle.net/Ukvfw/ and with smaller image same code http://jsfiddle.net/Ukvfw/1/

here is the code

html - (you can change the image link and try with any height and width)

<div class="parent">
    <img class="child" src="http://wiki.guildwars.com/images/thumb/6/60/User_Jette_awesome.svg/2048px-User_Jette_awesome.svg.png" />
</div>

css -

.parent{
 width:300px;
 height:300px;
 position:relative;
 border:1px solid red;
 padding:10px;
}

.child{
 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 max-height:300px;
 max-width:300px;
}

[Doesn't really work](http://jsfiddle.net/7XcCP/) :) note that OP doesn't know width — nice ass, May 15 '13 at 10:32
Doesn't work universal this trick only you can use in your condition — The Mechanic, May 15 '13 at 10:47

score 0 · Answer 5 · answered May 15 '13 at 10:52

0

<table style="width: 100%; height:100%;">
<tr>
 <td style="text-align: center; vertical-align: middle;">
      /*code here*/
 </td>
</tr>
</table>

I think this is the most "general & all terrain" way.

answered May 15 '13 at 10:52

Sergio

28,539
11
85
132

Absolute center an element without knowing it's height

5 Answers5