Question

我正在一个小网站上工作，我似乎无法弄清楚如何垂直居中。我把我的CSS放在HTML文件中，这样你就可以看到我正在做的一切。提前谢谢！

<head>
 <title>Test</title>
 <style>
   section {
     height: 100vh;
   }
   .test1 {
     background: grey;
   }
   .name {
     border: 3px solid white;
     color: white;
     padding: 25px 0;
     width: 35%;
   }
 </style>
</head>
<body>
  <section class="test1">
    <div class="container">
      <div class="row">
        <h1 class="text-center name center-block">Dylan Bailey</h1>
      </div>
    </div>
 </section>
</body>

Answer 1

使用属性height和line-height两者的值应该相同，这将使数据在中心对齐：）

Answer 2

如果页面上只有一个元素，那么这应该就是您所需要的。您还必须删除h1标记设置的默认边距。

＆＃13;

body {
  background: grey;
  width: 100%;
  height: 100%;
}
h1.name {
  border: 3px solid white;
  color: white;
  padding: 25px;
  margin: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

＆＃13;

<h1 class="name">Dylan Bailey</h1>

＆＃13;

Answer 3

只需使用bootstrap附带的网格即可。不需要CSS。

<body>
<section class="test1">
<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
        <h1 class="text-center name">Dylan Bailey</h1>
      </div>
  </div>
</div>
</section>
</body>

https://jsfiddle.net/DTcHh/14701/

在Bootstrap中垂直对齐？

3 个答案: