Centering Elements Within a div

Question

Hey Everyone have a couple questions regarding centering text and divs within a container.

Here is my codepen. http://codepen.io/_Dawood/pen/ByjvqO

My questions:

1.) What's the best way to get any element (text, images) inside a div to be centered vertically. 2.) Is it a good or bad idea to used a fixed height on the container div?

 <header>
  <div class="logo">
    logo
  </div>
  <h1 class="SiteTitle">
    Registrar's <span>Office</span>
  </h1>
  <div class="search">
    Search
  </div>
  <div class="az">
    A -> Z Index
  </div>
  <div class="sublinks">
    <a href=""> About</a>
    <p>Main Office</p>
  </div>
</header>


@import 'susy';
* { box-sizing: border-box; }
header {
  background:red;
  width:100%;
  height: 100%;
  @include container(100%);
  height:100px;



  .logo{
    @include span(3 of 12);
    border:1px solid #fff;
    height: 100%;

  }

  h1{
    @include span(5 of 12);
    border:1px solid #fff;
    height: 100%;
    font-size:40px;
  }
 .search, {
   @include span(2 of 12);
   border:1px solid #fff;
   height: 100%;
 }


  .az {
    @include span(2 of 12  last);
        border:1px solid #fff;
    height: 100%;


  }
.sublinks {
  background:blue; 
  clear:both;
  text-align:right;
  @include span(12 of 12 );
  @include break;
  a, p {
    display:inline-block
  }
}
}

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Alberto Rico, Dec 09 '14 at 21:30
It's not bad to use a fixed height if you know that the information wont overflow. Otherwise you could write a jQuery script that goes and sets the heights. That way you can ensure they are all the same and then absolutely position the elements vertically inside their parent. — kyle, Dec 09 '14 at 21:34
this article might help http://www.w3.org/Style/Examples/007/center.en.html#vertical — Ryan Gill, Dec 09 '14 at 21:37

score 0 · Answer 1 · answered Dec 09 '14 at 21:37

In my experience, a fixed height isn't necessarily a problem. If you have a fixed height container and a fixed height child element, then you can easily center things vertically just with css. For instance, if you have a 100px container and a 50px child, position it 25px from the top.

With more dynamic elements, I usually use javascript. If you use jQuery, you could set up a function like this:

function centerElement(container, child) {
     var containerHt = $(container).height();
     var childHt = $(child).height();
     var top = Math.round( (containerHt - childHt) / 2 );
     $(child).css('top', top);
}

Of course, the container would need to have relative position and the child would need to have absolute position. The left value might be an issue as well, in which case, you could have your function find the width of both elements and halve their difference as well.

Finally, there's another CSS solution that sometimes works (though it can cause some other problems, especially with overflow:hidden):

#container { display: table; }
#child { display: table-cell; vertical-align: middle; }

hey Nate, thanks for the response! I tried the display table cell but it breaks susy2 (floated elements it seems.) — Deedub, Dec 09 '14 at 21:38
Yeah, I almost always go with jQuery. If you're dealing with images, just remember to call the function in $(window).load() instead of $(document).ready() — Nate, Dec 09 '14 at 21:40

Centering Elements Within a div

1 Answers1