html外的空白

Question

I have a simple div which is supposed to be at the centre of the screen. The same code works in Chrome, Firefox but a white space is generated around the html in IE11 and Microsoft Edge.

Please provide any workarounds other than setting the overflow to hidden. I have content which might overflow vertically.

https://i.stack.imgur.com/ayi34.png

 body { margin: 0; padding: 0; }.container { position: relative; width: 100%; height: 100%; background-color: blue; }.inner { position: absolute; width: 200px; height: 300px; background-color: red; top: 50%; left: 50%; transform: translate(-50%, -50%); }

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

Answer 1

Use flexbox, here is an example that I tested in IE11 so it should work for all your supported browsers. I added a margin for the max size so the red box doesn't take up the entire screen, you can remove that if you don't care about that. I also converted your height and width into min-height and min-width in case you wanted the default smallest size.

 body { margin: 0; padding: 0; height: 100%; }.container { width: 100%; height: 100%; background-color: blue; display: flex; align-content: center; align-items: center; justify-content: center; }.inner { min-width: 200px; min-height: 300px; background-color: red; margin: 4em; }

 <div class="container"> <div class="inner"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> </div> </div>

Answer 2

The code snippet you provided doesn't reproduce the issue. It only shows the red div . Do you want the inner red div in the center of the outside blue div ? I make a demo and it works in IE 11 and Edge, you could check it:

 body { margin: 0; padding: 0; }.container { text-align: center; width: 100%; height: 100%; background-color: blue; }.inner { display: inline-block; vertical-align: middle; width: 200px; height: 300px; background-color: red; margin: 4em; }

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