Powered by GoodBarry

“Ninja Training for Web Designers”

Easy Vertical Centering with CSS

Friday, July 04, 2008 - Lawrence Hsu | BC

One of the first things I learned to do in CSS was how to horizontally and vertically center a fixed width and height element. This could be an image for a splash page (god forbid) or a small centered site that some designers love to do. Originally this was accomplished with absolutely positioning an element 50% from the top and 50% from the left of the viewport. This of course only places the top left corner of the element at the center of the viewport and you then need to drag the element back into a central position with a negative margin equal to half the height and half the width of the element.

Easy Vertical Centering with CSS by Paul OB

Recent Posts

Category

Archive

    Back to Top