如何使HTML <form> </form>居中

Question

我有一个带有一些CSS样式的HTML表单。

但我似乎无法在页面中间创建表单中心：

我试过了：

.cbp-mc-form {
    position: relative;
    margin:0 auto 0 auto;
    border:1px solid black;
}

但是没有用 - http://jsfiddle.net/uL4Sb/

Answer 1

这是因为你的表单没有宽度。它居中，但你无法看到它，因为它遍布整个页面。这是一个带有解决方案http://jsfiddle.net/uL4Sb/3/的JSFiddle。

.cbp-mc-form {
    position: relative;
    margin:0 auto 0 auto;
    border:1px solid black;
    width:500px;
}

正如你所看到的，我只是添加了一个宽度。就是这样！

Answer 2

试试这个

form{
width:400px;
margin:0 auto;
}

Answer 3

设置表单的宽度将使其居中

.cbp-mc-form {
    width: 400px;
    position: relative;
    margin:0 auto 0 auto;
    border:1px solid black;
}

请参阅此fiddle

Answer 4

你必须定义宽度以给予自动余量

这里你去http://jsfiddle.net/uL4Sb/5/

.cbp-mc-form {
position: relative;
margin:0 auto 0 auto;
border:1px solid black;
width:50%;
   }

Answer 5

要在页面中间进行表单对齐，请使用表单的宽度（最大宽度）。 试试：

.cbp-mc-form {
        position: relative;
        margin:auto;
        border:1px solid black;
        max-width: 300px;

}