advanced code snippet search

Posted By

giver on 02/17/11


Tagged

jquery center horizontal vertical


Versions (?)

Who likes this?

13 people have marked this snippet as a favorite

maltem
Hepamin
0xC0FFEE
dubogii
acousins
tewoos
scilec
A973C
FredericoFigo
lionminister
lookingforsome
imoddesign
pasia


jQuery Center Vertical and Horizontal Web Page

 / Published in: jQuery
 
Expand | Embed | Plain Text 
  1. jQuery.fn.center = function() {
  2.   this.css("position", "absolute");
  3.   this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
  4.   this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
  5.   return this
  6. };

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: kristapsancans on February 17, 2011

It can be easily done by CSS: 

content

centered{

background:#ccc;
border:1px solid #f00;
height:200px;
left:50%;
margin:-100px 0 0 -150px; /* negative margins half height and half width of centered block */
position:absolute;
top:50%;
width:300px}
Posted By: maltem on February 17, 2011

You are rignt kristapsancans, but this also means that parts of the content are invisible, if the width of the browser window is smaller than the content-width. And you can NOT scroll to the left to see the hidden content...

Posted By: Janny on March 1, 2013

Thanks for sharing this source! vi da

You need to login to post a comment.