How to center Div HORIZONTALLY and VERTICALLY both.

Centering Div by CSS only is a pain in the ass. However, some tricks exist to do it depending on a variety of factors like do you know its width or not, do you know its height or not.
I have analysed and found few helpful way do to the it. Although their are more methods available but I found few good way to do the same.

 

1) Centering a div in a page, horizontally and vertically by position absolute.

See the Pen Centering a div in a page, horizontally and vertically by position absolute by Ranjeet Kumar Jha (@ranjeetjha27) on CodePen.

 

2) Centering a div in a page, horizontally and vertically by using table.

See the Pen Centering a div in a page, horizontally and vertically by using table by Ranjeet Kumar Jha (@ranjeetjha27) on CodePen.

 

3) Centering a div in a page, horizontally and vertically by using flex.

See the Pen Centering a div in a page, horizontally and vertically by using flex by Ranjeet Kumar Jha (@ranjeetjha27) on CodePen.

Written by Ranjeet Jha

Ranjeet Jha

Hey there! My name is Ranjeet. I’m a Web Designer & Front-end Developer. I design, code, build & promote all things HTML5, CSS3, JavaScript & jQuery. In this blog you will find solutions of day to day problems faced by you.. Enjoy Coding..

Leave a Reply

Your email address will not be published. Required fields are marked *