Align an input box at a particular location - css

Question

I have a static image as background splash (800x600px), which consists of a blank space at a particular location which needs to be filled with a text box, this splash page is centered for all resolutions (CSS code below)
I am able to align it properly on a particular screen resolution, however when I see it in a different resolution the box moves out of position.
CSS / HTML :
.centeredSplash {
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner{
position:absolute;
background-color: #000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 350px;
v-align:top;
/*bottom:34%;*/
bottom : 420px;
right:50%;
margin-right: -190px;
}
input
{
-webkit-border-radius: 5px; //For Safari, etc.
-moz-border-radius: 5px; //For Mozilla, etc.
border-radius: 5px;
float:left;
}
<div class="centeredSplash">
<div class="roundcorner">
<input type="text" style="width:269px;margin-right: 10px" id="email"/>
</div>
</div>
This works fine in certain resoltuions but for higher resolutions the "roundcorner" keeps floating to awkward locations, how can I lock the position for any resolution, i.e. relative to the splash page image which will always be centered according to the resolution?

Answer 1

It is difficult to center an element with position: absolute specified. By some hacks, we can achieve the result but that solution would be more of a patchy work.
In this setup, .roundcorner will take its left and right from its parent which is centeredSplash containing your background image.
You can try the following:
.centeredSplash
{
position:relative;
width:100%;
height:100%;
background:url(Coming-soon.png) center center no-repeat;
}
.roundcorner
{
background-color: #eae53f;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border: 0px solid #000;
padding: 15px;
width: 400px; /*important*/
margin:0 auto; /*This will keep your box center in all screen resolutions*/
}
input
{
-webkit-border-radius: 5px; / * For Safari, Chrome */
-moz-border-radius: 5px; /* For Mozilla */
border-radius: 5px;
width:100px;
height:20px;
}
Working Demo
Note: For a block element to remain horizontally centered in all screen resolutions, it must have some width specified explicitly otherwise margin:0 auto will not work. For aligning vertically centered, we have to do something extra which is a different story. Here is a complete guide on centering in CSS.