垂直对齐 Bootstrap？

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 标记设置的默认边距。

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%);
}

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

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？

Vertically align in Bootstrap?

html

css

vertical-alignment

twitter-bootstrap