CSS Box Model

HTML/CSS illustrating the CSS box model.

HTML

<div class="content-container">
    <div class="content"><p>content</p></div>
</div>

<p class="note">To center the &lt;span&gt; in the parent container, set the parent to be position:relative, set the content container to position:absolute; set top/left of content container to 50%; set the left/top margins to be half the value of the content container's width/height (but NEGATIVE)). You need to take into account any padding, margin and border applied to the content container when calculating the values for margin-left and margin-right.</p>

CSS

.content-container{ position:relative; border:5px solid brown; height:200px; width:300px;}
.content{ position:absolute; border:5px solid yellow; width:200px; height:100px; top:50%; left:50%; margin-left:-105px; margin-top:-55px; background-color:#603813;}
.content p {border:2px solid pink; color:#ffffff; font-family:arial; font-size:10pt; text-align:center;}

.note{ font-family:arial; font-size:9pt; margin-top:20px; }

JavaScript

// display:block added to the span so that it is treated like a block level element and applies height/width styles