Member Avatar for janicemurby

hya im working on a template and i have the body and a content box and i want to align the content box to center of body how can i do this in css

ty jan x

  • 2 Contributors
  • 3 Replies
  • 128 Views
  • 36 Minutes Discussion Span
  • Latest Post Latest Post by pixelsoul

Dani AI

Generated

was right to point at horizontal-centering with auto margins as the simplest approach. Since reports that had no effect, the problem is almost always a conflicting rule. Common culprits: the box is floated, it is positioned (absolute/fixed), it is full-width, or it is inline. The quickest way to diagnose is to inspect the element in DevTools (check computed display, float, position, and width) and temporarily add a visible border to see its actual size.

If centering both horizontally and vertically is required, flexbox is the simplest modern solution:

html, body { height: 100%; margin: 0; }

.wrapper {
  min-height: 100vh;
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

.box {
  max-width: 90%;
  width: 700px;
}

If the box is absolutely positioned, use a translate trick to center it reliably:

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  max-width: 95%;
}

For horizontal-only centring of an inline-block element, center the parent’s inline flow:

.parent { text-align: center; }
.box { display: inline-block; vertical-align: top; width: 680px; }

Bootstrap-specific quick notes: in Bootstrap 3 use column offsets (for example col-md-6 col-md-offset-3). In Bootstrap 4/5, use utility classes like d-flex justify-content-center or mx-auto on a block-level element.

Troubleshooting checklist: disable floats, give the box an explicit width less than the parent, inspect specificity (overriding rules), and test changes live in DevTools. These steps explain why an auto-margin centering approach might “do nothing” and provide reliable alternatives.

Recommended Answers

All 3 Replies

Member Avatar for janicemurby

ive tried that but nothing as changed see pic included the contain in the middle is what im trying to move x

Image_1.png 35.14 KB
Member Avatar for pixelsoul

Ah, thought you meant you wanted someone vertically and horizontally centered on the body, like a login box.

You should be able just use margin:0 auto; to horizontally align it. If that's not working, then it's probably another style conflicting with it.

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.