html - 如何使 HTML 居中

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 {
        position: relative;
        margin:auto;
        border:1px solid black;
        max-width: 300px;

}

Answer 4

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

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

看到这个小提琴

Answer 5

你必须定义一个宽度来自动提供边距

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

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