centre a div larger than the viewport with jquery

Question

Is it possible to centre a div that is larger than the viewport using jquery so that its always centered regardless of re-size?

I have a jquery slider which is 2000px wide that I need to centre so that the central content always displays within the 1000px main content frame - regardless of screen size..

Can't be sure without seeing the code, but I'm fairly certain you could do this purely with CSS. — ayyp, Jun 06 '13 at 16:25

score 1 · Answer 1 · answered Jun 06 '13 at 16:43

Quite possible by setting it's "left" to 50% and it's "margin-left" to half of it's size in pixel.

http://jsfiddle.net/sbUXr/

<div style="position:absolute;width:300px; height:300px; left:50%; margin-left:-150px; border:2px solid red;">
    <div style="position:relative;width:100%;height:100%;">
        <div style="position:absolute;left:50%;top:100px;width:400px;height:100px;margin-left:-200px;border:2px solid green;">

        </div>
    </div>
</div>

centre a div larger than the viewport with jquery

1 Answers1