CSS - place block in the middle - php

Question

I have a simple PHP website, that uses PHP only to include another files in index.php, so you may consider it uses HTML only.
The problem is that when viewing a one page of the site in my laptop, it seems to display normally, while viewing it from my smartphone or PC makes it very strange.
Here is the link: strasbourgmeetings.org/rigaCloud/login: you will find two-color page there with a semi-transparent login form in the middle. Well the problem is that only my laptop displays it in the middle, but my PC and other devices are not.
Yes, I know there is a horrible CSS code, but, anyway, I would highly appreciate your help to place this block in the middle.
P.S.: I thought that top: 50%; left: 50% and margin: -25% 0 0 -25% will make it centered, but...
That is the HTML I use:
<div class="white"></div>
<div class="blue"></div>
<div class="heraldry"></div>
<!--</div>-->
<section class="container">
<div class="login">
<div class="loginOpacity"></div>
<h1>Login to RigaCloud</h1>
<form method="post" action="index.html">
<p><input type="text" name="login" value="" placeholder="Username or Email"></p>
<p><input type="password" name="password" value="" placeholder="Password"></p>
<p class="remember_me">
<label>
<input type="checkbox" name="remember_me" id="remember_me">
Remember me on this computer
</label>
</p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>
<!--<div class="login-help">-->
<!--<p>Forgot your password? Click here to reset it.</p>-->
<!--</div>-->
</section>
.white {
position: absolute;
top: 0;
width: 100%;
height: 50%;
}
.blue {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
}
.heraldry {
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 428px;
margin: -214px 0 0 -364px;
}
.container {
margin: 80px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.containerOpacity {
margin: 90px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}
.login {
position: absolute;
left: 50%;
top: 50%;
//margin: 0 auto;
margin: 0 auto 0 -25%;
padding: 20px 20px 20px;
width: 310px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
.loginOpacity {
background: #000;
position: absolute;
width: 310px;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: 0 auto;
padding: 20px 20px 20px;
}

Answer 1

Using auto for the left and right-margins will centre an element within its parent (together with other suitable css rules). However, your whole login form is within a section <section class="container"> which is absolutely positioned. You should concentrate on centring this container element, which will probably require removing its absolute positioning.
BTW Your login is also not centred if you reduce your browser's width on your laptop.

Answer 2

Give it a specific width and do margin: 0 auto;

Answer 3

This is my way of centering an element with no specific width.
You can use this method for text, images, buttons etc!
/* The HTML */
<div class="container">
<div class="content"></div>
</div>
/* The CSS */
.container {
float: left;
position: relative;
left: 50%;
}
.content {
float: left;
position: relative;
left: -50%;
}