CSS集中方法的区别。哪个更好？

Question

我目前想知道以下在CSS中居中“包装器”的方法有什么区别。

方法1：

#wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

方法2：

#wrapper {
    width: 960px;
    position: relative;
    margin: 0 auto -4em;

    min-height: 100%;
    height: auto !important;
    height: 100%;
}

从我以前的一些项目中可以看出，它们产生了同样的效果。 “方法2”是我在YouTube视频中找到的，而“方法1”来自我之前学到的。

我只是想知道哪个更好，如果可能的话。虽然我也不介意新的方法！任何有用的东西，我都会接受。谢谢你的阅读！

Answer 1

方法1将是首选方法，但为了使其响应，您应该

width:100%;
max-width:960px;

Answer 2

margin: 0 auto;

是

的简写

margin-top: 0; 
margin-bottom: 0; 
margin-right: auto;
margin-left: auto;

你的第二个例子等于

margin-top: 0; 
margin-bottom: -4em; 
margin-right: auto;
margin-left: auto;

，所以不与第一个示例相同（除非margin-bottom

继承-4em

但两者都将以块元素为中心。但是，bottom-margin: -4em将导致后续元素与此元素重叠4em ...

注意：所有这些仅适用于水平居中。这两种方法都有 no 垂直居中。