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;

Code:

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;

Code:

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

or;

Code:

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...ally/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..._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.

===
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

Originally Posted by obfiscation

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?

Code:

<!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

Thread: Centering The Div According To The Height Of The Page

Thread Tools

Search Thread

Centering The Div According To The Height Of The Page

The Following User Says Thank You to Beverleyh For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions