How to get main div container to align to centre

Question

I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following      padding auto  margin auto  text-align centre      I have seen other pages using    padding 0px margin 0px  but I can t see where or what do they do to centralise the main container   Could anybody explain how   Code example    lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta content  text html  charset windows-1252  http-equiv  Content-Type    gt   lt title gt This is the main container lt  title gt   lt style type  text css  gt     padding auto  margin auto  text-align center     lt  style gt   lt  head gt   lt body gt   lt div style  width 400px background-color  66FFFF display block height 400px   gt   lt b gt This is the main container  lt  b gt   lt  div gt   lt  body gt   lt  html gt    Could anybody explain how do they do it in the following page   http   www csszengarden com  cssfile  179 179 css amp page 4

User · Answer

You can text-align  center the body to center the container   Then text-align  left the container to get all the text  etc  to align left

User · Answer

The basic principle of centering a page is to have a body CSS and main container CSS  It should look something like this   body        margin  0       padding  0       text-align  center     main container        margin  0 auto       text-align  left

User · Answer

Do not use the   selector as that will apply to all elements on the page  Suppose you have a structure like this        lt body gt       lt div id  content  gt           lt b gt This is the main container  lt  b gt       lt  div gt   lt  body gt   lt  html gt    You can then center the  content div using    content       width  400px      margin  0 auto      background-color   66ffff      Don t know what you ve seen elsewhere but this is the way to go  The     margin  0  padding  0    snippet you ve seen is for resetting browser s default definitions for all browsers to make your site behave similarly on all browsers  this has nothing to do with centering the main container   Most browsers apply a default margin and padding to some elements which usually isn t consistent with other browsers  implementations  This is why it is often considered smart to use this kind of  resetting   The reset snippet you presented is the most simplest of reset stylesheets  you can read more about the subject here    http   meyerweb com eric tools css reset

User · Answer

I would omit the     text-align center   declaration  as it sets center alignment for all elements   Usually with a fixed width container margin  0 auto should be enough

[css] How to get main div container to align to centre?

Examples related to css

Examples related to html

Examples related to alignment