我在表单标签中有一个提交按钮。这个表单标签有一些 CSS 属性：
- 在桌面上它有一个固定的
- 在移动设备上，它有一个百分比宽度
问题是，表单内的提交按钮有 width:auto; 和保证金：0自动；这样它就在表单标签内居中。但是 webkit（移动 safari 和 safari）不明白这一点。在那些浏览器中，提交按钮不是居中而是在左侧。所以我写了一个 jquery 脚本来计算宽度并将其设置为提交按钮（而不是宽度：自动）。这就是解决办法。
我做了一项研究，现在我知道，我可以使用 display:table-cell; 在表单标签中，它将使内容居中（提交按钮）但是：这意味着我不能将表单本身居中。所以我的问题是，如何修改下面的代码，使表单在包装器内居中，提交按钮在表单内？
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrap{
width:1000px;
background:red;
}
form {
height:100px;
width:500px;
margin:0 auto;
display:table-cell;
border:1px solid black;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
}
form input[type=submit], form input[type="button"], form input[type="reset"], form button {
width:auto;
min-width:40%;
height:32px;
margin:20px auto;
line-height:14px;
padding:9px 15px;
background-color:#617798;
border:0;
font-size:14px;
color:#FFFFFF;
text-align:center;
vertical-align:middle;
-webkit-box-align: center;
/* Border-Radius */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-khtml-border-radius:5px;
-o-border-radius:5px;
cursor:pointer;
display:inline;
/* iPad-Button-Reset:*/
-webkit-appearance:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Titel Blafasel</h1>
<form>
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>