How To Center A DIV Vertically And Horizontally By Valid CSS?

While building web page layouts, you’ve probably been faced with a situation where you should center a div the two horizontally and vertically using pure CSS. There are some ways to accomplish that, and in this tutorial Let me show you my personal favorite involving CSS without addition to jQuery.

Its Way too hard to Center a DIV if really a designer want to make its design responsive and maintain your DIV in center so intended for him, Here we have an excellent Snippet to center a DIV vertically and also horizontally by valid CSS.

Features:

1.) Pure CSS 2.0 Code.
2.) No JavaScript Or JQuery.
3.) HTML 4.0 Tags Used.
4.) Simple And Easily Coding.
5.) Full Customizable.
6.) Quick To Load Without Intercepting.

1.) Fixed Size DIV Centering:

.center_DIV {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 500px;
   height: 500px;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

2.) Free Size DIV Centering:

#wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper .center_DIV {
   vertical-align: middle;
   text-align: center;
}

Customization:

Your main DIV that is gonna be in center is .center_DIV div so fill it with your desired data. You can also change it width or height or colors and all things if you know about it.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.