Jump to content

Center A Div Horizontally And Vertically


narcis

Recommended Posts

Is it possible to center a div (not a text or an image) horizontal and vertical? I have always used the position absolute and negative margins like in the example that I provide. But it has the problem that if the content i larger than the window, the content is cut. Is there another way to center without this problem?.

 

I have the example here to play: http://jsfiddle.net/6KaMy/1/

I attach the file too.

0.html

Link to comment
Share on other sites

Is it possible to center a div (not a text or an image) horizontal and vertical? I have always used the position absolute and negative margins like in the example that I provide. But it has the problem that if the content i larger than the window, the content is cut. Is there another way to center without this problem?.

 

I have the example here to play: http://jsfiddle.net/6KaMy/1/

I attach the file too.

 

Im not sure exactly what your asking but why don't you get rid of positoon absolute for the

.content div and change it to position relative and change it to margin right and left = auto. That should centre it on the x axis.

You could then centre in on the y-AXIS by setting a margin top = 30% or 300px again for the .content

Div but the exact px or percentage depends really on your height requirements.

Im not sure is this what your looking for?

Edited by Stephenius
Link to comment
Share on other sites

First a little fix in your css. You can put px behind but it is better to leave it off when you want to zero something out like margins and padding. the reason is if you put px behind it is only stripping the px. But what about %, em, pt by leaving it at just 0 you make sure that you have it all. Yes I know we do not use pt for web but print, but I have seen it done.

 

* body{
    margin: 0;
    padding:0;
}

 

Here is how you center something inside of the body or any container element.

 

body {
    margin: 0 auto 0 auto;
}

 

This is shorthand code. Think of it as a clock the first property value of 0 at 12 = top, 3 = right, 6 = bottom, 9 = left. So the 2 0's are the top and bottom margin thus the 2 autos are left and right.

 

You can even make this shorter

 

body {
    margin:0 auto;
}

 

The 0 is now top and bottom and the auto is left and right. I put both ways because sometimes you you might want the top to be pushed away from an element. Like if you wanted a space from your wrapper if you did not want your site at the top af the browser window.

Edited by grabenair
Link to comment
Share on other sites

I requires to use position: absolute with percentages and pixes. Or, you can use a bit of jquery.

 

This article will help you accomplish this.

 

TKG: This two solutions are good to center vertical and horizontal but they does not solve the problem: "if the content i larger than the window, the content is cut"

Edited by narcis
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...