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/