Center an element directly in the center of screen. jQuery

Question

just want to center the blue box directly in the center of the screen using jquery.

<html>

What have you tried? This JSFiddle pertains to your previous question... It seems you're getting us to build your project bit by bit. — ahren, Mar 01 '13 at 00:34
Seems like you got the "post some code in the question instead of just linking to JSfiddle" message, in that case you should post code related to the question instead of a random tag. — Fabrício Matté, Mar 01 '13 at 00:35

score 1 · Accepted Answer · answered Mar 01 '13 at 00:42

To center your blue box, it's position has to be set to position:absolute;

if your blue box changes size dynamically, you have to center it using javascript.

Here is a quick example:

$('#color')
    .css('top','50%')
    .css('left','50%')
    .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
    .css('margin-top','-'+($('#color').outerHeight()/2)+'px');

Make sure it stays center on browser resize:

$(document).bind('resize', function(){
        $('#color')
        .css('top','50%')
        .css('left','50%')
        .css('margin-left','-'+($('#color').outerWidth()/2)+'px')
        .css('margin-top','-'+($('#color').outerHeight()/2)+'px');
    });

It will probably be a good idea to wrap the centering code into a function and call it whenever the size of the blue box changes.

Here is the edited jsFiddle:

http://jsfiddle.net/mdkpS/

score 0 · Answer 2 · answered Mar 01 '13 at 00:35

0

Basics of centering elements in css:

Make a container for your element and put it at body level (to center in the middle of the screen)
Set position: relative on the container
Set position: absolute on the element
Add fixed width and height to the element
Set top: 50% and left: 50% on element
Set margin-left and margin-top to negative half the width and height respectively

The same logic applies for jQuery, only that you can calculate dimensions and margins dynamically.

answered Mar 01 '13 at 00:35

elclanrs

92,861
21
134
171

I know css. I believe the question specifies using jQuery. – Josue Espinosa Mar 01 '13 at 00:37
3

The same logic applies for jQuery. – elclanrs Mar 01 '13 at 00:37

Center an element directly in the center of screen. jQuery

2 Answers2