How to center a div on a page vertically and horizontally


I often need to do center a div, here is a css code on how to center a div inside a div or body

CSS

.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

HTML

<body>
<div class="box">centered content</div>
</body>

Reference: stackoverflow.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s