如何使用 html css 居中对齐

Question

我对 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;
}

Answer 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/垂直对齐-div/

Answer 2

padding 之后缺少冒号

Answer 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 */

}

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

Answer 5

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

在 padding 之后需要一个冒号，如果将所有边距设置为自动，则无需指定每个边距对于单个子集，您可以只指定 margin: auto ，这将为所有边距使用 auto 。

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