Centering The Div According To The Height Of The Page [Archive]

View Full Version : Centering The Div According To The Height Of The Page

HaLiLL

01-02-2011, 09:01 PM

Hi friends,

I use a div on the page;

margin-left: auto;
margin-right: auto;

according to the width of each page to div with the codes center resolution.

According to the height of the following codes mean when I use when I want to do;

margin-top: auto;
margin-bottom: auto;

or;

top: 50%;

I use a div code to each page according to the resolution of the longitudinal center.

Div centered according to the height of the page What do I do?

VijayKanta

01-04-2011, 05:32 AM

Your post is very confusing, I am sorry. But what I understood was that you want a DIV to auto-align according to the height of the website. Is it not true that your website will be fixed in height due to the fixed height of your screen? No matter how long your page is, height of website is same at one glance at your computer screen.

Please enlighten me as I tend to not clearly understand your post.

Beverleyh

01-04-2011, 04:12 PM

Maybe this?: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

HaLiLL

01-05-2011, 11:32 PM

@Beverleyh
thank you.

@VijayKanta
you can see the sample and the coding by checking the source of the site
make the browser window minimize and make it again bigger. you will understand what i mean

http://fatihhayrioglu.com/dokumanlar/dikey_yatay_ortalama.html

molendijk

01-06-2011, 12:47 AM

The easiest way to center a div is putting something like this:

<div style="position: absolute; left:30px; right: 30px; top: 30px; bottom: 30px">a div </div>

You can replace the pixels with percentages.

See also this blog (http://www.dynamicdrive.com/forums/blog.php?b=47).

===
Arie Molendijk.

obfiscation

01-09-2011, 08:23 PM

Excepting the Jquery outsource from Beverleyh this css forum thread, I do not see anything here that relates to liquid dimensioning. What if your center div is 50%of window vertical height and 75% of window width? To further obfuscate solution using CSS, what if your div has a border 2.5% of div width?

I am not certain, but I think liquidity runs into snags. Perhaps browsers restructure the logical page in ways that interfere with fractional percentages. Some solution may rest in stretching an elastic child center div between two parent layers, one absolute and the other relative.

molendijk

01-09-2011, 10:23 PM

What if your center div is 50%of window vertical height and 75% of window width? To further obfuscate solution using CSS, what if your div has a border 2.5% of div width?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Centered div</title>
</head>
<body>
<div style="position: absolute; left:12.5%; right: 12.5%; top: 25%; height: 6.33%; background:red;"></div>

<div style="position: absolute; left:12.5%; top: 25%; width: 3.33%; bottom: 25%;background:red;"></div>

<div style="position: absolute; left:12.5%; right: 12.5%; bottom: 25%; height: 6.33%; background:red;"></div>

<div style="position: absolute; right:12.5%; top: 25%; width: 3.33%; bottom: 25%;background:red;"></div>

<div style="position: absolute; left:12.5%; right: 12.5%; top: 25%; bottom: 25%; "></div>

</body>
</html>
Arie Molendijk