How to Vertically Align a <Table> in the Middle of a Fixed Height <Div>

How can I vertically align a table in the middle of a fixed height div ?

Outside of table cells, vertical-align sets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.

However, if you set display: table-cell; on your <div>, that seems to achieve the effect you want.

I’m not sure how many browsers support this though. I’ve checked in Chrome 6, Firefox 2 and Opera 10.5, and they’re fine with it. Internet Explorer could be a different matter.

How to vertical align a table inside a div

Div's don't allow vertical aligns typically. The only option would be to make it act like a table cell or do something like margin/padding that will look like your table is vertically aligned.

Centering elements vertically in a fixed-height container

Add display flex and align-self center: https://jsfiddle.net/w3s8cj92/1/

header {

  height: 80px;

  position: fixed;

  top: 0;

  transition: top 0.2s ease-in-out;

  width: 100%;

}

footer {

  background: #ddd;

}

* {

  color: transparent

}

nav {

  height: 100%;

  width: 100%;

  background-color: bisque;

  display: flex;

}

nav ul {

  list-style: none;

  text-align: center;

  margin: 0;

  padding: 0;

  top: 50%;

  align-self: center;

}

nav ul li {

  display: inline-block;

  float: left;

}

nav ul li a {

  display: block;

  padding: 15px;

  text-decoration: none;

  color: #aaa;

  font-weight: 800;

  text-transform: uppercase;

  margin: 0 10px;

}

<header class="nav-down">

  <nav class="headernav">

    <ul>

      <li><a href="#">Gig</a></li>

      <li><a href="#">ity</a></li>

      <li><a href="#">element</a></li>

    </ul>

  </nav>

</header>

vertical align middle wont vertical align middle when the div is a fixed height

You can use a line-height setting that is identical to the height of the container. This will vertically center the h1 without any further settings:

.fixed-height {
  height: 100px;
  background-color: green;
}

.fixed-height h1 {
  font-size: 14px;
  line-height: 100px;
  color: red;
}

<div class="fixed-height">
  <h1>VERTICAL ALIGN ME</h1>
</div>

CSS: Vertically align div when no fixed size of the div is known

This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.

The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.

The HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" />
    </span>
</span>

And the CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" /></span>
</span>

Note that the span's are also required for IE7. In every other browser, the span's may be div's.

How can I vertically align elements in a div?

Wow, this problem is popular. It's based on a misunderstanding in the vertical-align property. This excellent article explains it:

Understanding vertical-align, or "How (Not) To Vertically Center Content" by Gavin Kistner.

“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.

In a nutshell _{^{(and to prevent link rot)}}:

Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example
For block elements, vertical alignment is harder and strongly depends on the specific situation:
- If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example
- If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example
- … there are more such special cases.

how to vertically center a div of variable height in a fixed height div

To vertically center elements in a fixed-height parent element set their vertical-align: middle. Add an additional element displayed as an inline-block with a zero width and full height.

Sample HTML:

<div class="container">
    <div class="height"></div>
    <img ...>
    <img ...>
</div>

Sample CSS:

.container {
    height: 300px;
}
.height {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}
.container > img {
    vertical-align: middle;
}

Demo at JS Bin

If you know the height of the container you can also set it's line-height to the same value instead of using the div.height.

How to vertically center content with variable height within a div?

Just add

position: relative;
top: 50%;
transform: translateY(-50%);

to the inner div.

What it does is moving the inner div's top border to the half height of the outer div (top: 50%;) and then the inner div up by half its height (transform: translateY(-50%)). This will work with position: absolute or relative.

Keep in mind that transform and translate have vendor prefixes which are not included for simplicity.

Codepen: http://codepen.io/anon/pen/ZYprdb

Vertically align middle without knowing the height

You can do this easily using jQuery:

(function ($) {
    // VERTICALLY ALIGN FUNCTION
    $.fn.vAlign = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph-ah) / 2);
            $(this).css('margin-top', mh);
        });
   };
})(jQuery);

$('.classname').vAlign();

Source: http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/

UPDATE

Possible CSS solution: jsFiddle

<div class="parent">
    <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam blanditiis optio aliquam voluptas adipisci itaque repellendus voluptatum magni vel nam sequi hic voluptatem perferendis deleniti labore aliquid incidunt officiis magnam.</div>
</div>

.parent {
    width:300px;
    padding:50% 0;
    border:1px solid black;
    float:left;
}
.child {
    margin:0 auto;
    border:1px solid black;
}