CSS3 Box Module

Div center on page

css

<style>
html, body {
height:100%;
}
body {
margin:0;
padding:0;
width:100%;

display:box;
display:-webkit-box;
display:-moz-box;

-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;

-webkit-box-align:center;
-moz-box-align:center;
box-align:center;
}

#container {
width:800px;
height:300px;
padding:20px;
background:#ccc;
position:relative;
}
</style>

html

<div id=container>
<p>CSS3 Box Module</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque congue feugiat vestibulum. Maecenas vitae nibh nulla, sed ornare eros. Etiam sollicitudin est eu risus mollis tincidunt. Nam adipiscing accumsan eros, ut vehicula diam consectetur ac. Fusce volutpat, mi sed tristique vehicula, metus eros vestibulum velit, at ullamcorper metus arcu non felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sodales facilisis diam, ut posuere urna mattis at. Proin varius, magna non euismod pretium, diam erat elementum felis, eget rhoncus diam augue semper nibh. Curabitur dictum, lorem a tempus condimentum, nibh justo vestibulum risus, et mollis mauris eros vel nisl. Suspendisse vitae leo libero. Nulla blandit turpis sed nulla euismod feugiat. Duis malesuada pulvinar lacus ac mattis. Nulla tincidunt pretium magna nec lacinia. Donec dictum sollicitudin sodales. Nunc pretium neque a velit placerat at imperdiet nisl elementum. Duis viverra felis vitae dolor vestibulum tincidunt. Nulla pellentesque, ante in dignissim pretium, neque nunc vulputate est, a hendrerit urna sem eget elit. Nam lorem sapien, aliquam ac dictum sed, fringilla nec massa. Cras mi libero, ultricies tristique pellentesque eu, pharetra vitae tellus. </p>
</div>

Related Posts

CSS3 Box Sizing, CSS3 background-size, CSS3 Columns, CSS3 Customize Textarea Resizing, CSS3 Outline, CSS3 calc(),