The simplest way to horizontally and vertically center a DIV
Wed, 05/02/2007 - 20:54 — dfadmin
.centered_div {
.centered_div {
I have gone trough a lot of ways to horizontally and vertically center a DIV. Many of the code snippets had a Child DIV1 inside a Parent DIV2 to center the Child. They work perfect but I found a simpler way to center a single DIV trough CSS.
I am not sure if this is already known to all, but I experimented and came up with this simple CSS snippet.
Here is a visual representation of how this works:
Here is the CSS Snippet to be assigned to the DIV to be centered. The size of the DIV is 100 x 100 px ( same as the above example ).
/* CSS Document */
.centered_div {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}
Here is another example with size 500 x 200 px.
/* CSS Document */
.centered_div {
width:500px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
background: red;
}
You can also find an online example here
Trackback URL for this post:
http://www.dezinerfolio.com/trackback/188
- dfadmin's blog
- Login to post comments
Visualize
Check them out!
Comments
hey its a very good tutorial to work on div.
Eveгything posted was actuаllу veгy logiсаl.
Howeveг, сonѕider thіs, suppοѕe you typed
a cаtchier poѕt title? I mean, I don't wish to tell you how to run your website, but suppose you added a post title that grabbed folk'ѕ
attention? I mean Reply to commеnt | Dezinerfolio is kinda boring.
You might looκ at Yahoo's front page and see how they create article titles to grab people to click. You might add a related video or a related picture or two to get readers interested about everything've written.
In my opinion, it wοuld bring уοur wеbsite
a lіttle bіt more interesting.
Thanks for your tutorials!
but in my variant you can not initialize height! that's very good
This is a bad solution.. try to resize browser window... i think you will be unhappy.
I using another way.
I like this for its simplicity but I have one problem - if the browser is smaller than the div, the scroll bar only allows you to scroll to the right and hides content on the left side.
Great!
=)
/cheers
wow...i was searching for a good method to put div in center....i got it....thank u............
Yeah, for a starter, this might be considered the ultimate solution, but to say the least, this is quite a lot of work for something as simple as centering a div.
This should take care of your center div, with out having on the extra styles.
.your_div{
width: 500px;
height: auto;
margin: 0px auto; <!--this code is all your need to really center the div-->
}
Benga creative
Yeah, for a starter, this might be considered the ultimate solution, but to say the least, this is quite a lot of work for something as simple as centering a div.
This should take care of your center div, with out having on the extra styles.
.your_div{
width: 500px;
height: auto;
margin: 0px auto; <!--this code is all your need to really center the div-->
}
Benga creative