Member Avatar for Griffin54

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.

  • 7 Contributors
  • 6 Replies
  • 252 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by lps

Dani AI

Generated

Several replies are on the right track. and pointed toward a wrapper + CSS solution, and correctly flagged that absolutely positioned elements need special handling. A few examples in the thread also contain small typos (missing semicolons or misspelled properties) that will silently prevent styles from applying — those are worth checking before changing layout strategy.

A modern, simple approach is to let the page container sit inside a flex container that centers horizontally. This avoids relying on margin calculations and works well across responsive breakpoints:

html, body { height:100%; margin:0; }
body {
  display: flex;
  justify-content: center; /* horizontal centering */
}
.page {
  width: 75vw;        /* 75% of the viewport width */
  max-width: 1200px;  /* keep lines readable on large screens */
  box-sizing: border-box;
  padding: 20px;
}

If the container must be removed from normal flow (position:absolute) — which is why margin:auto won’t help — use a translate trick that centers relative to its positioned parent:

.parent { position: relative; }
.page-abs {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 75vw;
  max-width: 1200px;
}

Quick troubleshooting checklist:

  • Confirm the CSS file is actually loaded and look for typos (examples in the thread like boder or missing ; will break rules).
  • For margin:auto centering the element must be block-level and have an explicit width; inline elements need text-align:center on the parent.
  • Floated children or missing clears can affect parent sizing — use a clearfix or ensure the wrapper contains floats.
  • Use DevTools → Computed Styles to see final width/margins and identify overriding rules.

For most modern projects the flexbox approach is the simplest and most robust; the margin-auto technique remains fine for basic, older-style layouts but requires the element to be in normal flow with a set width.

Recommended Answers

All 6 Replies

Member Avatar for pritaeas

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

Member Avatar for JorgeM

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}

Member Avatar for Alaister

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.

Member Avatar for shahbaz13

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>
Member Avatar for gabrielcastillo

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;}
Member Avatar for lps

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.