Make a Div center in any browser

<html>
<head>
  <style>
    #wrapper, #container {
        height: 500px;
        width: 600px;
    }

    #wrapper {
        border: 1px solid red;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

    #container {
        border: 1px solid blue;
        background: yellow;
        left: 50%;
        padding: 10px;
        position: relative;
        top: 50%;
    }
    </style>
</head>
<body>
 <div id="wrapper">
        <div id="container">
         THIS CONTENT WILL BE CENTERED
        </div>
 </div>
</body>
</html>
Loading