I have a h1, and a h3 that I can't vertically center in Foundation 6

Question

I've tried to everything to vertically center my h1 and h3 tag in Foundation 6. I've tried the transform translate, flexbox, and tried multiple examples here on stack over flow, and nothing works. When I use absolute positioning to center the content the, the headings get in the way of the top-bar nav on smaller screens, id there anyway to fix this issue, and Could some give me a hand with this? The h1 tag, and the h3 tag are located in line 48, and 49 of my codepen. Codepen link

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="off-canvas-wrapper">
            <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
                <!-- Close button -->
            <button class="close-button" aria-label="Close menu" type="button" data-close>
        <span aria-hidden="true">&times;</span>
            </button>
            <ul class="vertical menu">
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">References</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
            </div><!-- off-canvas menu -->
            <div class="off-canvas-content" data-off-canvas-content>
            <!-- Your page content lives here -->
            <div class="hero-image">
                <div class="expanded header-intro row">
              <button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
              <div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
              <button class="menu-icon" type="button" data-toggle></button>
              <div class="title-bar-title">Menu</div>
              </div>
              <div class="top-bar show-for-small-only" id="menu">
                <div class="top-bar-left">
                <ul class="dropdown vertical menu" data-dropdown-menu>
                    <li class="menu-text">Foundation Framework</li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Reference</a></li>
                    <li><a href="#">About</a></li>
                </ul>
                </div>
              </div>
                </div>
                <div class="row">
            <div class="small-12 text-center columns"> 
              <h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
              <h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
            </div>
                </div>
            </div><!-- Eno of hero-image section -->
            </div><!-- off-canvas-content-->
        </div><!-- off-canvas wrapper-->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Welcome to SO. Maybe try aligning any of these _small-12 text-center columns_, whichever one is unique to the header. How to align can be found [here](https://stackoverflow.com/questions/18649106/div-vertical-align-middle-css) — Syfer, Jun 05 '17 at 00:31

score 0 · Answer 1 · answered Jun 04 '17 at 23:57

you can use flexbox; you need to set a height to your flexbox container to see the centered title

here an example : https://codepen.io/anon/pen/YQPPaM

$(document).foundation();

.hero-image {
 background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/mountains-snow/mountains-snow-header-7050.jpg);
 background-position: center center;
 background-repeat: no-repeat;
 background-size: cover;
 padding-bottom: 25%;

}
.container{
  height : 100vh;
  display: flex;
  flex-direction : column;
  justify-content : center;
  align-items : center;
  
}

<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="off-canvas-wrapper">
   <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap">
    <!-- Close button -->
      <button class="close-button" aria-label="Close menu" type="button" data-close>
       <span aria-hidden="true">&times;</span>
      </button>
     <ul class="vertical menu">
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">References</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
   </div><!-- off-canvas menu -->
   <div class="off-canvas-content" data-off-canvas-content>
     <!-- Your page content lives here -->
     <div class="hero-image">
      <div class="expanded header-intro row">
           <button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu -->
           <div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation -->
              <button class="menu-icon" type="button" data-toggle></button>
              <div class="title-bar-title">Menu</div>
           </div>
           <div class="top-bar show-for-small-only" id="menu">
             <div class="top-bar-left">
                <ul class="dropdown vertical menu" data-dropdown-menu>
                 <li class="menu-text">Foundation Framework</li>
                 <li><a href="#">Home</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Reference</a></li>
                 <li><a href="#">About</a></li>
                </ul>
             </div>
           </div>
      </div>
      <div class="row">
            <div class="small-12 text-center columns container"> 
              <h1>Foundation</h1> <!-- like the h1 centered vertically -->
              <h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically -->
            </div>
      </div>
     </div><!-- Eno of hero-image section -->
   </div><!-- off-canvas-content-->
  </div><!-- off-canvas wrapper-->
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

I removed the justify-content from your example,and now the h1, and h3 are centered perfectly, Cedric. I was wondering why I couldn't get this idea to work with flexbox, turns out I need the 100vh like you mentioned. — ShortCircuit616, Jun 05 '17 at 00:13

score 0 · Answer 2 · answered Jun 05 '17 at 00:09

try this

h1 {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

h3 {

    margin: 0;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);

}

Reference: w3schools

score 0 · Answer 3 · answered Jun 05 '17 at 06:34

I suppose you're using flex-grid, so you can just add align-middle class to you row. This will add align-items: center; attribute, and align your columns' content vertically in the center.

.row {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-flow: row wrap;
  
  height: 200px;
}

.align-middle {
  align-items: center;
}

.column, .columns {
  flex: 1 1 0px;
  padding-left: 20px;
  padding-right: 20px;
  min-width: initial;
}

<div class="row align-middle">
            <div class="small-12 text-center columns"> 
              <h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
              <h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG -->
            </div>
                </div>

I have a h1, and a h3 that I can't vertically center in Foundation 6

3 Answers3