如何使用html css居中对齐答案

【问题标题】：how to align in centre using html css如何使用html css居中对齐
【发布时间】：2011-08-05 00:06:52
【问题描述】：

我是 html 和整个 web 开发过程的新手（如果这是一个愚蠢的问题，请原谅）但是我如何才能将表单置于页面中间？我有下面的代码，但是当我应用它时，表单居中对齐但粘在页面顶部 - 为什么？我可以手动调整它，但我想会出现问题，具体取决于稍后查看网站的分辨率。

 #formWrapper{
    width:550px;
padding 2em 0 2em 0;                    border:solid 5px #F1F1F1;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    background-color: #AFC8DE;
}

【问题讨论】：

你知道表格的高度还是动态的？

标签： html css css-position

【解决方案1】：

#formWrapper{
    width:550px;
    padding: 2em 0 2em 0;                    
    border:solid 5px #F1F1F1;
    margin:0 auto;
    background-color: #AFC8DE;
}

对于垂直对齐的 div 看这里的例子

http://stylizedweb.com/2008/02/01/vertical-align-div/

【讨论】：

【解决方案2】：

padding 后面缺少冒号

【讨论】：

【解决方案3】：

auto 的边距只有在定义了明确的宽度时才有效，但不适用于垂直居中的东西——这实际上在 CSS 中并不容易做到。最简单的方法就是这样做

#formWrapper {
    height: 400px;
    width: 550px;
    position: absolute;
    top: 50%; /*position halfway down the page */
    margin-top: -200px; /*shift item up half it's width (assuming here the height is 400px)*/
    left: 50%; /*position in center of page */
    margin-left: -275px; /*shift item left half it's width (working with your width of 550px)*/
    /*add your other values here, 
    but not anything that will conflict with the above */

}

【讨论】：

【解决方案4】：

您需要在填充后添加一个“:”！

#formWrapper{
width:550px;
padding: 2em 0 2em 0;                    
border:solid 5px #F1F1F1;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #AFC8DE;
}

【讨论】：

【解决方案5】：

如果直接复制/粘贴，则需要解决一些语法错误：

padding 后面需要一个冒号，如果您将所有边距设置为自动，则无需指定每个单独的子集，您只需声明 margin: auto，它将对所有边距使用自动。

#formWrapper
{
width: 550px;
padding: 2em 0 2em 0;                    
border: solid 5px #F1F1F1;
margin: auto;
background-color: #AFC8DE;
}

【讨论】：