Search code examples
htmlcsstwitter-bootstrapvertical-alignment

Vertically align in Bootstrap?

I'm working on a small site and I can't seem to figure out how to center my name vertically. I put my CSS in the HTML file, just so you can see everything I'm doing. Thanks in advance!

<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>
Solution

  • This should be all you need if you only have one element on the page. You'll have to remove the default margin that's set by the h1 tag also. 

    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>