When considering how to structure your layout, it's important to think about the specific scenario you are working with. In my personal experience, I have always opted for using width:960px; margin:0 auto; for the container body.
If you plan on incorporating multiple divs within your main container, it's crucial to carefully consider the content they will house. If you can accurately predict the size of the contents, using the width/margin method may be suitable. However, there are instances where the exact size is uncertain, in which case setting width:100%; margin:0 1em; provides a flexible margin on each side of the container.
Recently, I employed a different approach when designing a fantasy football squad layout that required aligning multiple items at the center:
HTML
<div class="squad">
<div>GK</div>
<br/>
<div>DF</div>
<div>DF</div>
<div>DF</div>
<div>DF</div>
<br/>
<div>MF</div>
<div>MF</div>
<div>MF</div>
<br/>
<div>ST</div>
<div>ST</div>
<div>ST</div>
</div>
CSS
.squad {
width: 320px;
font-size:0;
text-align: center;
}
.squad div {
font-size: 16px;
display: inline-block;
width: 40px;
background-color:red;
margin:1px 5px;
text-align:center;
}
In general, I tend to avoid using position:fixed/absolute as it can lead to conflicts with other styling elements.
The best approach ultimately depends on the specific requirements of your project, the type of content you intend to include, and your level of certainty regarding that content.