Using jQuery to center a DIV on the screen?

Question

How do I go about setting a `<div>` in the center of the screen using jQuery?

Answer 1

Hi there. I am not sure what your use case is but normally you would style elements via css unless they need to be styled dynamically. That said, all you need to do to style an element via jQuery is call the .css method on the jQuery object and pass the styles (the same you would use to center your div using pure css) as an object to the method. Just be aware that the css property needs to be camelCased.

// centers horizontally

var styles = { margin: '0 auto', backgroundColor: 'blue'};

$( 'div' ).css(styles);

If you have an individual property you can set it like this:

/* strings can be either hyphenated of camelCased */

$( 'div' ).css( 'font-size', '30px' );

/* OR */

$( 'div' ).css( 'fontSize', '30px' );