Best way to center a div on a page vertically and horizontally

Question

What is the best approach to vertically and horizontally centre a div element on a page?

What is the ideal approach to centre on the vertical axis as well? I know margin-left: auto; margin-right: auto; will centre on the horizontal.

Answer 1

The legitimate way to do that irrespective of size of the div for any browser size is :

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }