Member Avatar for Soben 
<body>
<div style="height:100; width:100%; background-color:black">
 hello.
</div>
</body>

I want to put it in the middle of the page, how can I do it? ty ^.^

  • 3 Contributors
  • 2 Replies
  • 78 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by RoyalElite96

Dani AI

Generated

's snippet has two common pitfalls to call out: the inline height:100 is missing units (CSS requires px, %, vh, etc.), and percentage heights require a parent with an explicit height (for example html, body { height: 100%; }). 's note about vertical-align: middle is correct in the right context, but that property only affects inline-level or table-cell contents — it does not vertically center a block element inside a normal block parent.

A modern, simple approach is Flexbox. On the wrapper (or body) set display: flex and use align-items plus justify-content to center both axes:

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

body {
  display: flex;
  align-items: center;       /* vertical */
  justify-content: center;   /* horizontal */
}

.box { height: 100px; width: 60%; background: black; color: white; }

For single elements an absolute-position + transform technique is a reliable fallback:

.wrapper { height: 100vh; position: relative; }

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

CSS Grid also makes this trivial with place-items: center:

body { display: grid; place-items: center; height: 100vh; margin: 0; }

Flexbox and Grid are recommended for modern projects; absolute+transform is useful when centering one element or for older-browser fallbacks. For more patterns and browser notes see Centering in CSS (complete guide) and the MDN Grid/Flexbox docs (CSS Grid Layout).

Recommended Answers

All 2 Replies

Member Avatar for RoyalElite96

Put the <div> you want to align in another <div>.
In that one use vertical-align: middle. Hope that helps.

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.