Best way to center align a div with unknown width and height?

Question

Say I have a div on my page as:

<div class="center"></div>

My CSS looks something like:

.center{
    background:red;
    position:absolute;
    left:50%;
    top:50%;
    margin-left: ?
    margin-top: ?
}

So as you can see above, the only thing that I need to know is how to set margin-left and margin-top values. If I had a known width and height of .center div (say 300px each), I would have set margin-left and margin-top values as half of that value (-150px both)

But my question is how do I set those values if width/height of .center div is unknown (or say it's dynamic)?

Can I use some kind of CSS expression OR does that have cross-browser limitations? What's the best way to do this?

If you mean horizontal and vertical: http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/ — greener, Mar 16 '13 at 05:22
With a little jQuery this becomes very easy. Is jQuery an option? — Matt Coughlin, Mar 16 '13 at 05:33
CSS expressions are only supported by IE5/6/7. They were discontinued as of IE8, and were never supported by non-IE browsers. — Matt Coughlin, Mar 16 '13 at 06:58

p.s.w.g · Answer 1 · 2013-03-16T05:45:16.913

4

To center horizontally is pretty easy. Use

width: 50%; /* or anything other than auto */
margin-left: auto;
margin-right: auto;

or alternatively:

margin: 0 auto;

To center vertically, it's a bit more difficult, and depends a lot on the other elements surrounding your div. See this article for some pointers.

edited Mar 16 '13 at 05:45

answered Mar 16 '13 at 05:20

p.s.w.g

146,324
30
291
331

I do not have any container element....Just the div to be center...So I do not want to use the auto technique... – copenndthagen Mar 16 '13 at 05:24
1

@testndtv why not? It's by far the easiest way to do it. – p.s.w.g Mar 16 '13 at 05:25
@MattCoughlin it works with proportional width too. Here's an [example](http://jsfiddle.net/tKeEN/) – p.s.w.g Mar 16 '13 at 05:36
3

Clarification: `margin: auto` only works with an explicit (non-auto) width (a length value, such as px, em, or %). In this case, there's no explicit width. – Matt Coughlin Mar 16 '13 at 05:41
1

@MattCoughlin point taken. I included a note about that in my answer – p.s.w.g Mar 16 '13 at 05:46
The asker is specifically asking about unknown widths. 50% is not an unknown width. This is not an answer. – Michael Bylstra Nov 23 '14 at 13:11

score 4 · Answer 2 · answered Mar 16 '13 at 05:21

4

Simplest version of this pattern.

 .center-block
 {     
      margin: 0 auto
 }

answered Mar 16 '13 at 05:21

Eric Rini

1,830
15
20

1

Here's a jsfiddle http://jsfiddle.net/rjY7F/482/, which also works if there are multiple elements that need to be centered regardless of screen size. (question is the case with only one element) – user984003 Apr 07 '14 at 14:11
You are just repeating what we all know doesn't work, even the author acknowledged that this doesn't work. This does not answer anything. In the example in the comments, you are setting explicit widths. If the author of the question knew the width, this question would never have been asked. This answer does not help at all. – Orlando Morales-Cochran Feb 09 '17 at 17:23

Yannick Schuchmann · Answer 3 · 2013-03-16T06:12:57.240

If your div hasn't a fixed size, unfortunately the only way is to use javascript.

For example (jsFiddle Demo):

Javascript(jQuery)

var $container = $('#centered');

var mLeft = $container.outerWidth() / 2;
var mTop = $container.outerHeight() / 2;

$container.css({
    'margin-left': -mLeft, 
    'margin-top': -mTop,
});

CSS:

html, body {
    height: 100%;
}
#centered {
    position: absolute;
    left: 50%;
    top: 50%;
    background: red;
}

Matt Coughlin · Answer 4 · 2013-03-25T15:19:59.413

With no explicit width, no ancestor elements to make use of, and only a single div, the only option left may be to use JavaScript or jQuery (if that's an option).

JSFiddle demo using jQuery (dynamically set the margin).

CSS

.center {
    position: absolute;
    left: 50%;
    top: 50%;
}

jQuery

var leftOffset = $('.center').width() >> 1;
var topOffset = $('.center').height() >> 1;
$('.center').css('margin', '-' + topOffset + 'px 0 0 -' + leftOffset + 'px');

score 0 · Answer 5 · answered Mar 16 '13 at 05:26

0

To make div center of the page. Width property must be set.

.center{
   background:red;
   margin: 0 auto;
   width:500px;
}

answered Mar 16 '13 at 05:26

Tsimtsum

981
9
27

Best way to center align a div with unknown width and height?

5 Answers5