Question

我正在创建我的第一个网站，而我正在使用Bootstrap。我已经完成了我的导航，我对它的外观很满意，但后来我正在尝试创建一个标题并将其水平和垂直居中，这就是我失败的地方。

然后我添加一个标题h1，它得到白色背景（http://prntscr.com/8fb18g），我无法将它居中。

如何水平和垂直居中标题并摆脱那个白色背景？

提前致谢

Answer 1

假设我正确理解了这些要求，这是你想要实现的目标吗？

HTML

<header>
  <div class="absolute-center">
    <h1>Web Developer</h1>
  </div>
<header>

CSS

header {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.absolute-center {
  position: relative;
}

header h1 {
  text-align: center;
  text-transform: uppercase;
  color: green;
  background-color: transparent;
}

header {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.absolute-center {
  position: relative;
}

header h1 {
  text-align: center;
  text-transform: uppercase;
  color: green;
  background-color: transparent;
}

<header>
  <div class="absolute-center">
    <h1>Web Developer</h1>
  </div>
<header>

如何使用h1居中标题并删除背景

1 个答案: