html - margin :0 auto; does not work

Question

我知道这个问题被问过几次，但它不适用于我的例子:(

这是我的代码

index.html.erb

<div class="welcome">
    <h1>h1</h1>
    <h3>h3</h3>
    <small>small</small>
</div>

CSS

body {
   margin: 0;
   padding: 0;
   background-image:url('sitebackground.jpg');
   background-repeat: no-repeat; 
}

.welcome{
   display: block;
   left: 10%; 
   width: 80%;
   margin:0 auto;
}

Answer 1

删除左侧:100%，如 Pierce McGeough 建议的那样。我创建了一个 simple fiddle展示。我还添加了背景色来展示 80% 的宽度和居中位置。

.welcome{
   display: block;
   width: 80%;
   margin: 0 auto;
   background-color: blue;
}

如果您还试图摆脱上边距，则该边距来自 h1。所以添加以下 css:

h1 {
    margin: 0; /* or just margin-top: 0; */
}