Align CSS3 button inside wrapper using html - html

Question

I have a simple css3 button and I need to align this button inside my wrapper as shown.
If I use the below code I am able to do but whenever I resize my browser it is not fixed in its place and its moving along with the browser.
This is my wrapper code:
.Wrapper
{
position: absolute;
left: 38%;
width: 914px;
height:584px;
margin-top: 50px;
margin-left: -266px;
padding: 15px;
border: 1px solid #99CCFF;
background-color: #FFFFFF;
}
Here is my CSS3 button code:
.button, .button span {
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
white-space: nowrap;
line-height:1em;
position:absolute;
top:443px;
left:1030px;
outline: none;
overflow: visible; /* removes extra side padding in IE */
cursor: pointer;
border: 1px solid #999;/* IE */
border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
border-bottom:rgba(0, 0, 0, .4) 1px solid;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .1) 0%,
rgba(0, 0, 0, .1) 100%
);/* FF3.6 */
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(0, 0, 0, .1)),
to(rgba(255, 255, 255, .1))
);/* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;
margin-bottom:10px;
}
.button.full, .button.full span {
display: block;
}
.button:hover, .button.hover {
background: -moz-linear-gradient(
center top,
rgba(255, 255, 255, .2) 0%,
rgba(255, 255, 255, .1) 100%
);/* FF3.6 */
background: -webkit-gradient(
linear,
center bottom,
center top,
from(rgba(255, 255, 255, .1)),
to(rgba(255, 255, 255, .2))
);/* Saf4+, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active {
top:1px;
}
.button span {
position: relative;
color:#fff;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
border-top: rgba(255, 255, 255, .2) 1px solid;
padding:0.8em 1.9em;
line-height:1em;
text-decoration:none;
text-align:center;
white-space: nowrap;
}
.button.large span {
font-size:22px;
}
.button.blue {
background-color: #3a80e2;
width:229px;
height:58px;
}
This is how I'm showing it:
<div class="Wrapper">
<a class="button large blue" href="#"><span>Sample Button</span></a>
<div>
This is before resizing:
This is while resizing:
Here is a js fiddle demo

Answer 1

You have these lines in your .button class:
position:absolute;
top:443px;
left:1030px;
Change them to your needs. For example:
position:relative;
margin:40px auto;
I hope that helps
UPDATE: Is this what you want? http://jsfiddle.net/kGs6f/3/show/