Tuesday, April 22, 2014

How to align div vertically and horizontally center of the page

Hi, This is commonly asked interview question for web designers and developers.So thought of sharing the answer with you guys. This question can be tackled in many different ways but I will be showing you one technique for this question.Let get started.

This question can be tackled in using CSS. Following CSS will align the required div vertically and horizontally center of the page. Paste following code in CSS file and call this class(.wrapper) in your html page.

CSS


.wrapper {
position: absolute;
border: 1px solid #333;
top: 25%;
left: 25%;
right: 25%;
bottom: 25%;
}

HTML

<div class="wrapper"></div>

Output


Hope this helped you.Pendown your question in comment box if any.
To know more about me visit www.nithinchandrasr.com or you can subscribe to my Youtube channel to follow latest trends in web development.