Vertically Align Div (No Tables)

Vertically align div (no tables)

Unless you have the ability to explicitly set the height of your container (which doesnt look like that's the case), there is no cross browser solution for vertically centering your DIV container.

Using a table is completely viable, but you have noted that this cannot be used.

If javascript is an option, we could easily remedy this for you. A jQuery plugin already exists for vertically aligning a container.

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

And you would vertically align a DIV block like so:

$('#example').vAlign();

Taken from Simple Vertical Align Plugin.

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 align div inside another div without display:table-cell

You can use an extra helper to achieve vertical alignment in a block with fixed height.

Look at this: http://jsfiddle.net/kizu/7Fewx/

There you must have a helper near a block you want to align with:

.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

And add display: inline-block; vertical-align: middle; to .DivWhichNeedToBeVerticallyAligned

Vertical align div inside another div without flex

Here you go.

Code Snippet:

.hello {
  height: 100px;
  width: 100px;
  background-color: black;
  vertical-align: middle;
  display: inline-block;
  color: white;
}

.parent {
  height: 400px;
  width: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div class="parent">
  <div class="hello">
    hello
  </div>
</div>

How can I vertically center a div element for all browsers using CSS?

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

How to vertically center <div> inside the parent element with CSS?

The best approach in modern browsers is to use flexbox:

#Login {
    display: flex;
    align-items: center;
}

Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.

Recommended Reading

• Browser support
• A Guide to Flexbox
• Using CSS Flexible Boxes

How to position a table at the center of div horizontally & vertically

Centering is one of the biggest issues in CSS. However, some tricks exist:

To center your table horizontally, you can set left and right margin to auto:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

To center it vertically, the only way is to use javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

No vertical-align:middle is possible as a table is a block and not an inline element.

Edit

Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/

Why is vertical-align: middle not working on my span or div?

Using CSS3:

<div class="outer">
   <div class="inner"/>
</div>

Css:

.outer {
  display : flex;
  align-items : center;
}

use "justify-content: center;" to align elements horizontally

Note: This might not work in old IE's

---

Related Topics