How To Center Web Page

Hello;
I am working on a web page that I have designed to take up 75% of the monitor.
Presently this web page when loaded auto aligns to the left side of my monitor.
While it looks fine I would prefer it to be centered on my monitor. I have tried writing a code that will center my web page but am having no luck.
I'm sure that it is a simple fix but I can't seem to get it to work.
Anyone out there know what code I should use to center my web page?
Thanks.

8

Contributors

6

Replies

2 Weeks

Discussion Span

1 Year Ago

Last Updated

7

Views

Griffin54

Light Poster

38 posts since Mar 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

1

Have you tried margin: auto; on your outer div?

pritaeas

Posting Prodigy

Moderator

9,316 posts since Jul 2006

Reputation Points: 1,178

Solved Threads: 1,467

Skill Endorsements: 86

1 Year Ago

1

Create two divs, outer and inner div. The inner div goes inside of the outer div...

<div class="outerDiv">
  <div class="innerDiv">
    your main content
  </div>
</div>

CSS
.outerDiv {width:75%;margin:auto;}
.innerDiv {style as you would normally for your content}

JorgeM

Industrious Poster

4,024 posts since Dec 2011

Reputation Points: 297

Solved Threads: 549

Skill Endorsements: 115

1 Year Ago

0

Enclose the body of your page within a DIV tag. Since the goal is to center the entire web page, this should be just about everything within the BODY tag. Place the <DIV> tag immediately after the <BODY> tag and put the closing </DIV> tag just before the </BODY> closing tag.

Alaister

Newbie Poster

5 posts since Apr 2012

Reputation Points: 0

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

Put that dic inside a another div and set the outside div align to center. Like

<div algin="center">
<div>Your Main Content</div>
</div>

shahbaz13

Junior Poster in Training

52 posts since Jul 2011

Reputation Points: 10

Solved Threads: 4

Skill Endorsements: 0

1 Year Ago

0

Here is what i do:

<div class="wrapper">
    <div class="main-content">
        <h2>Hello World</h2>
    </div><!--end of main content -->
</div><!-- end of wrapper -->


/*CSS Styles*/
.wrapper {background:#fff; boder:1px solid #ddd; margin:0 auto; padding:0 20px width:1024px;}

gabrielcastillo

Junior Poster in Training

54 posts since Apr 2012

Reputation Points: 0

Solved Threads: 5

Skill Endorsements: 0

1 Year Ago

0

<!DOCTYPE html>
<html>
<head><style>body{width:1000px;margin:auto;}</style></head>
<body>
<p>something goes here</p>
</body>
</html>

BUT if an element is having position absolute, it should have additional style "left:0;right:0;" in order to have it positioned to center.

lps

Posting Whiz in Training

208 posts since Jul 2011

Reputation Points: 13

Solved Threads: 43

Skill Endorsements: 3

How To Center Web Page

This article has been dead for over three months: Start a new discussion instead