Center A Div Horizontally And Vertically

[narcis]

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

[Moloney]

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 January 6, 2013 by Stephenius

[grabenair]

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 January 6, 2013 by grabenair

[narcis]

Stephenius: I just update the file with your code. It does not seem to work: http://jsfiddle.net/6KaMy/2/

Am I missing something?

Edited January 8, 2013 by narcis

[narcis]

grabenair: Margin 0 auto only centers the divs horizontally. I was asking "center a div horizontally and vertically"

Edited January 8, 2013 by narcis

[newseed]

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.

[narcis]

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 January 9, 2013 by narcis

[coollew]

Might i suggest that you wrap your text in <p> tags like this (<p> text is hidden here</p>)

and assign margins and padding to the content p. in your css.