Vertically Center (Using Bootstrap-CSS)

Question

I have been writing some code for a website, and I'm not able to vertically center text. I have read multiple answers on StackOverflow and other sites about how to vertically center html (mainly using the display:table and display:table-cell methods and the top:50%, transformY method), however, I am not able to implement either of these methods successfully. I have attached my code here, hoping that someone will be able to spot an error of my mine which is causing the code to not work. (In this code, I have used the top:50%, transformY method of vertically centering text). Any help would be greatly appreciated.

HTML:

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="stylesheet.css">
  <title>Game Timer and Scorekeeper</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row" id="heading">
      <div class="col-xs-12">
        <div class="positioner">
          <h1>Game Timer and Scorekeeper</h1>
        </div>
      </div>
    </div>
    <div class="row" id="top-labels">
      <div class="col-xs-3 labels teamlabel" id="a-label">
        <div class="positioner">
          <h2>Team A</h2>
        </div>
      </div>
      <div class="col-xs-6 labels" id="gameclock-label">
        <div class="positioner">
          <h2>Game Clock</h2>
        </div>
      </div>
      <div class="col-xs-3 labels teamlabel" id="b-label">
        <div class="positioner">
          <h2>Team B</h2>
        </div>
      </div>
    </div>
    <div class="row" id="thirdrow">
      <div class="col-xs-3 pointsclock teampoints" id="pointsA">
        <div class="positioner">
          <h1>POINTS A</h1>
        </div>
      </div>
      <div class="col-xs-6 pointsclock" id="gameclock">
        <div class="positioner">
          <h1>GAME CLOCK</h1>
        </div>
      </div>
      <div class="col-xs-3 pointsclock teampoints" id="pointsB">
        <div class="positioner">
          <h1>POINTS B</h1>
        </div>
      </div>
    </div>
    <div class="row" id="fourthrow">
      <div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolA">
        <div class="positioner">
          <h2>CONTROL A</h2>
        </div>
      </div>
      <div class="col-xs-6 ptcontclock" id="questionclock">
        <div class="positioner">
          <h2>QUESTION CLOCK</h2>
        </div>
      </div>
      <div class="col-xs-3 ptcontclock ptcontrol" id="ptcontrolB">
        <div class="positioner">
          <h2>CONTROL B</h2>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS:

.container-fluid {
  width: 100vw;
  height: 100vh;
}

#heading {
  height: 15vh;
  border: 2px solid;
}

#top-labels {
  height: 10vh;
  border: 2px solid;
  width: 100vw;
}

#top-labels .labels {
  border-right: 2px solid;
  border-left: 2px solid;
}

#thirdrow {
  height: 40vh;
  border: 2px solid;
  width: 100vw;
}

#thirdrow .pointsclock {
  height: 40vh;
  border-right: 2px solid;
  border-left: 2px solid;
}

#fourthrow {
  height: 35vh;
  width: 100vw;
}

#fourthrow .ptcontclock {
  border-right: 2px solid;
  border-left: 2px solid;
  height: 35vh;
}

.positioner{
  height:100%;
  width:100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Possible duplicate of [vertical-align with Bootstrap 3](http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3) — happymacarts, Apr 25 '17 at 20:08
Most likely relates to floated elements and nesting height in `vh` units. Can you minimize the example? — Carol Skelly, Apr 25 '17 at 20:21

score 1 · Accepted Answer · answered Apr 26 '17 at 03:28

You can try this.

HTML

<main>
   <div>
       I'm a block-level element with an unknown height, centered vertically 
       within my parent.
   </div>
</main>

CSS

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  width: 200px;
  padding: 20px;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  resize: vertical;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  padding: 20px;
  resize: vertical;
  overflow: auto;
}

<main>
  
  <div>
     I'm a block-level element with an unknown height, centered vertically within my parent.
  </div>
  
</main>

check this link for reference https://css-tricks.com/centering-css-complete-guide/

Vertically Center (Using Bootstrap-CSS)

1 Answers1