Member Avatar for harsh93

Hello,

I m making the site and i have the main div tag that i want to set to center and it should be fit all the srceens in center.


So is there tag we can add?
I have tried but i can't do so.

please reply me.
Harsh patel.

  • 3 Contributors
  • 2 Replies
  • 75 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

This thread asks how to center the main container across all screens. was correct that CSS is the right tool and correctly flagged the DOCTYPE/quirks-mode issue. A modern, responsive pattern is to give the container a fluid width with a sensible max-width, include padding via box-sizing, and use auto margins to center horizontally:

.container {
max-width: 1100px;
width: 90%;
margin-left: auto;
margin-right: auto;
padding: 0 16px;
box-sizing: border-box;
}

If vertical centering of the whole page is needed, use a full-height parent with Flexbox:

html, body { height: 100%; }
.main {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

Troubleshooting notes: margin:auto only centers block-level elements that are not floated; missing or legacy DOCTYPE can force quirks mode (older IE will not behave as expected), so use <!DOCTYPE html> and include a viewport meta for mobile layouts (<meta name="viewport" content="width=device-width,initial-scale=1">). For implementation details and browser behavior, see MDN on DOCTYPE and on box-sizing: Doctype (MDN) and box-sizing (MDN).

Recommended Answers

All 2 Replies

Member Avatar for wpmonster

use css

.yourmaindivclass{
width:500px;
margin:0 auto;
}
Member Avatar for ko ko

Don't forget DTD.
IE needs DTD to support 'auto margin' property.

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.