使用 html 在包装器内对齐 CSS3 按钮

Question

我有一个简单的 css3 按钮，我需要在包装器内对齐此按钮，如图所示。

如果我使用下面的代码，我可以做到，但是每当我调整浏览器大小时，它都不会固定在其位置，并且会随着浏览器一起移动。

这是我的包装器代码：

.Wrapper
{
    position: absolute;
    left: 38%;
    width: 914px;
    height:584px;
    margin-top: 50px;
    margin-left: -266px;
    padding: 15px;
    border: 1px solid #99CCFF;
    background-color: #FFFFFF;
}

这是我的 CSS3 按钮代码：

   .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;
}

这是我的展示方式：

<div class="Wrapper">
 <a class="button large blue" href="#"><span>Sample Button</span></a>
<div>

这是调整大小之前的：

这是调整大小时的：

这是一个 js 小提琴 演示

Answer 1

您的 .button 类中有以下几行：

position:absolute;
top:443px;
left:1030px;

根据您的需要更改它们。例如：

position:relative;
margin:40px auto;

我希望有帮助

更新：这是你想要的吗？ http://jsfiddle.net/kGs6f/3/show/