Center Div or Other Objects with CSS

/* Posted June 20th, 2008 at 3:01pm */
/* Filed under CSS */
/* */

blurry zoom css effect

CSS is a powerful method to describe the look and layout of a webpage but as versatile as it is, being able to center an object isn’t immediately obvious. Unlike HTML, which has an explicit centering tag, namely

<div align="center"></div>

no such mechanism exists in CSS. After a bit of research, I found out how to do it. Simply use the margin-left and margin-right properties. If you set them to the same value, that “centers” your object, be it a div or anything else.

div { margin-left: 50px; margin-right:50px; }

But what if you have a fixed width div object and you want it to vary the left and right margin based on the browser screen size? The answer is simple:

div { margin-left: auto; margin-right:auto; }

will do the trick. With auto, the values are always set to something equal and will automatically be determined based indirectly through the other layout properties you provide.

Related Tweets

(TechJob_Chicago) New #job: Programmer, HTML, CSS, LAMP (Chicago) #jobs #tech http://bit.ly/noI1U
Sat, 07 Nov 2009 23:04:12 +0000 | Reply | View Tweet
(CindyRoyal) @SeeBQ Excellent. I can handle the html/css part, been teaching Web design fro 10 yrs. Have some experience w PHP/MySQL
Sat, 07 Nov 2009 22:57:19 +0000 | Reply | View Tweet
(hywelbane) #hywelbanelinks Essential CSS/HTML Lists Styling Techniques - Noupe http://migre.me/aYqV
Sat, 07 Nov 2009 22:53:35 +0000 | Reply | View Tweet
(frjobs) http://tinyurl.com/yc87qyt HTML Email Templates 30-250$ (#.NET #AJAX #ASP #CMS #Photoshop #CSS #Website Design )
Sat, 07 Nov 2009 22:50:15 +0000 | Reply | View Tweet
(slookin) #html #css немного про accesskey - shortcut'ы на веб-страничках http://bit.ly/3qMSnR
Sat, 07 Nov 2009 22:37:05 +0000 | Reply | View Tweet

One Response to “Center Div or Other Objects with CSS”

Comment from Messoriti

/* January 25, 2009 at 12:21 pm */

?????? ??????? ? ? ????? ( ?????????? ????????? ???? ????? ????) ???? ????????? ??? ??????? ? ????? ???? ??????????????, ???? ????? ??????? ???? ???? ? ???????????? ????, ??? ??? ????? ????? ?? ????? ???????? ?? ??????. ????? ?????, ?? ??????

Reply to this comment