Question

我一直试着让我的内容始终保持中心。我的宽度居中：文本对齐，但我无法弄清楚如何垂直居中我的内容。以下是元素的代码：

HTML：

  <div class="content">
    <img src="logo.png">
    <h1>HELLOWORLD</h1>
    <p class="lead">CREATED BY JOHN DOE</p>
    <button class="btn">Signup</button>  
  </div>

CSS：

.content {
  text-align: centre;
}

.content h1{
  color: white;
  font-family: NoveBold;
  font-size: 150px;
  line-height:94%
}

.content p{
  color: white;
  font-family: NoveLight;
  font-size: 30px;
}

.content img{
}

.content btn {
}

有没有人知道如何自动垂直对齐此内容以使其以页面为中心？

Answer 1

试试这个：

.outter {
    position: absolute;
    display: table;
    width: 100%;
    height: 100%;
    text-align: center;
}
.middle {
    display: table-cell;
    vertical-align: middle;
}
.content {
    text-align: center;
    display: inline-block;
    width: auto;
}
.content h1{
  color: black;
  font-family: NoveBold;
  line-height:94%;
}

.content p{
  color: black;
  font-family: NoveLight;
}

<强> Demo

Bootstrap / CSS始终将内容完美地保持在页面中心

1 个答案: