Member Avatar for MarrkoR

Hi,
I want to put the div in the middle of the page.
I found one:
pagetext-align: center; but work only with IE.

  • 3 Contributors
  • 2 Replies
  • 56 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

the rule you tried is not valid CSS. And is right: text-align centers inline content inside a container, not the block element itself. If you want the actual div centered on the page, use a layout method rather than text alignment. MDN has a concise overview of the options and when to use each ().

If you want the div perfectly centered both horizontally and vertically, Flexbox is the simplest, responsive approach:

/* parent element (e.g., body or a wrapper) */
.page {
  min-height: 100vh;
  display: flex;
  justify-content: center;  /* horizontal */
  align-items: center;      /* vertical */
}

/* the centered div */
.box {
  max-width: 640px;         /* keep content readable on large screens */
}

Alternatively, CSS Grid can do the same with even less code:

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;      /* centers both axes */
}

Troubleshooting tips:

  • Remove the browser’s default body margin, which can make things look off: body { margin: 0; }.
  • If you only need horizontal centering, you can give the div a fixed or max-width and center it with auto side margins (as hinted by ). That pattern requires standards mode; a quirks-mode page can break centering. Ensure a modern DOCTYPE so the browser uses standards mode (Quirks vs. Standards Mode).
  • For legacy layouts or when Flexbox/Grid are not an option, absolute positioning with a translate works well:
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Recommended Answers

All 2 Replies

Member Avatar for Troy III

Hi,
I want to put the div in the middle of the page.
I found one:
pagetext-align: center; but work only with IE.

I've never seen something like : "pagetext-align: center;"
do you mean: [?]page{text-align: center} ?
Cause it should work with all current browsers. [it only centers text of its container though. ]

But if your aim is to center some element on the page but leave the text aligned on its default left, you can do something like this: elementIDorClass {margin: auto; width:40%;} you can add some background-color just to se that the element is perfectly centered. !use strict doctype.

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.