6 Replies - 3208 Views - Last Post: 26 August 2010 - 04:19 PM

#1 Guest_eTech1*


Reputation:

Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 07:24 AM

I have a hidden div that I want to center on the screen using css. When the user clicks an 'edit date' button this hidden div will appear in the center of the screen and let them change a date.

What's the best way to do this using css?
Is This A Good Question/Topic? 0

Replies To: Centering a div onscreen no matter height/width of screen or browser?

#2 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3796
  • View blog
  • Posts: 13,742
  • Joined: 08-August 08

Re: Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 10:14 AM

.example {
	position: relative;
	margin: 25%;
	width: 50%;
	height: 50%;
	background-color: red;
}


Was This Post Helpful? 0
  • +
  • -

#3 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,295
  • Joined: 07-September 06

Re: Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 10:35 AM

Or, if you know the specific size of the div:
.example{
  width: 500px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -300px;
  background: #f00;
}



Now, there is one thing to note about both of these examples. It will put it in the center of the screen assuming there is no x or y scroll offset. If you want to center a box on a scrolled screen you (at this point) need to use Javascript to calculate the position the box should be at then use that to modify the CSS.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#4 daekano   User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 62
  • Joined: 07-July 10

Re: Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 12:15 PM

I tend to set the height of the body and html elements to 100%, use vertical-align on the element to center vertically, and assign margin-left/right to auto.

Am I crazy? >.>
Was This Post Helpful? 0
  • +
  • -

#5 drhowarddrfine   User is offline

  • D.I.C Regular

Reputation: 39
  • View blog
  • Posts: 275
  • Joined: 28-July 10

Re: Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 03:25 PM

View Postdaekano, on 26 August 2010 - 12:15 PM, said:

I tend to set the height of the body and html elements to 100%, use vertical-align on the element to center vertically, and assign margin-left/right to auto.

Am I crazy? >.>

Yes, because vertical-align is for inline elements only.
Was This Post Helpful? 0
  • +
  • -

#6 daekano   User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 62
  • Joined: 07-July 10

Re: Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 03:49 PM

I went to check on my latest project to see how I vertically aligned a block element, and saw that I had in fact used the same method as described by CTphpnwb. I'm trying to find the page that I learned that technique from, but I can't. Maybe It was all in a dream.

Or maybe I was drunk when I found it. Probably that.
Was This Post Helpful? 0
  • +
  • -

#7 CTphpnwb   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3796
  • View blog
  • Posts: 13,742
  • Joined: 08-August 08

Re: Centering a div onscreen no matter height/width of screen or browser?

Posted 26 August 2010 - 04:19 PM

By the way, my example is missing min-height and min-width, and you probably should use them so that even small windows look reasonable. ;)

Then again, a 30" display might do well with max-height and max-width too!

This post has been edited by CTphpnwb: 26 August 2010 - 04:21 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1