Center full screen div with margin

Question

I don't know how to center a full screen div. I want to center a div with width: 90% and height: 90% , but when I use this code:

 html, body { width: 100%; height: 100%; } .outer { height: 100%; position: relative; text-align: center; width: 100%; } .inner { height: 90%; width: 90%; position: relative; top: 5%; background: red; margin: 0 auto; } 

 <div class="outer"> <div class="inner"> </div> </div> 

I get a little bit of scroll that I don't want.

Answer 1

Use this:

html,body {
    margin: 0;
   //other codes...
}

 html, body { width: 100%; height: 100%; margin: 0; } .outer { height: 100%; position: relative; text-align: center; width: 100%; } .inner { height: 90%; width: 90%; position: relative; top: 5%; background: red; margin: 0 auto; } 

 <div class="outer"> <div class="inner"> </div> </div>