我尝试在页面顶部以水平和垂直居中放置<h2>元素的div。

的HTML

<div id="header"><h2>The header</h2></div>


的CSS

body{
    margin:0;
    padding:0;
}
#header{
    width:100%;
    height:100px;
    background-color: #9C27B0;
    line-height: 100px;
    text-align: center;
}


我得到的怪异效果是div的顶部和窗口的上边缘之间有一个空间。

如果我只在div中(没有h2标记)中写入文本,则不会出现此类问题。但是,我找不到任何资料来解释为什么line-height和<h>标签产生奇怪的结果。

最佳答案

标题(从h1h6)默认具有margin,因此在这种情况下只需重置h2



body {
  margin: 0;
  padding: 0;
}
#header {
  width: 100%;
  height: 100px;
  background-color: #9C27B0;
  line-height: 100px;
  text-align: center;
}
h2 {
  margin: 0
}

<div id="header">
  <h2>The header</h2>
</div>

10-08 05:38
查看更多