Vertically Centering a Div Inside Another Div

Vertically centering a div inside another div

tl;dr

Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child.

This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.

The classic solution (table layout)

This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.

Here is an example

Tested in:

FF3.5+
FF4+
Safari 5+
Chrome 11+
IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

Modern solution (transform)

Since transforms are fairly well supported now there is an easier way to do it.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

♥ my favourite modern solution (flexbox)

I started to use flexbox more and more its also well supported now Its by far the easiest way.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

Demo

More examples & possibilities:
Compare all the methods on one pages

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

auto - CSS reference | MDN
margin - CSS reference | MDN
What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

Vertically center a div inside another div

The vertical-align property applies only to inline-level and table-cell elements (source). In your code you're working with block-level elements.

Try this flexbox alternative:

#wrapper {    border: 1px solid red;    width: 500px;    height: 500px;    display: flex;               /* establish flex container */    align-items: center;         /* vertically center flex items */}
#block {    border: 1px solid blue;    width: 500px;    height: 250px;    /* vertical-align: middle; */}

<div id='wrapper'>    <div id='block'> I'm Block </div><div>

Vertical alignment of a DIV inside another DIV

Add this to your slideshow element, using flexbox. Flex Needs prefixing for IE11 (caniuse)

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

Edit: I enabled the commented height and width styles in your jsFiddle, but this method will vertically align slideshow child regardless of width and height.

What is the best way to center a div inside another div?

Here's some ideas of how you can achieve it.

https://codepen.io/Warisara-L/pen/wOMxwR

// HTML
<div class="wrapper" id="solution-1">
  <div class="inner">1</div>
</div>

// SCSS
#solution-1 {
  display: grid;
  .inner {
    margin: auto;
  }
}

#solution-2 {
  display:flex;
  justify-content: center;
  align-items: center;
}

#solution-3 {
  position: relative;
  .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

#solution-4 {
  display: flex;
  .inner {
    margin: auto;
  }
}

#solution-5 {
  display: grid;
  justify-content: center;
  align-items: center;
}

#solution-6 {
  position: relative;
  .inner {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

#solution-7 {
  height: 120px;
  line-height: 120px;
  text-align: center;
  .inner {
    display: inline-block;
    vertical-align: middle;
  }
}

#solution-8 {
  display: flex;
  .inner {
    align-self: center;
    margin: 0 auto;
  }
}

Have a good day sir :)

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>

Vertically center a div inside another div

The vertical-align property applies only to inline-level and table-cell elements (source). In your code you're working with block-level elements.

Try this flexbox alternative:

#wrapper {    border: 1px solid red;    width: 500px;    height: 500px;    display: flex;               /* establish flex container */    align-items: center;         /* vertically center flex items */}
#block {    border: 1px solid blue;    width: 500px;    height: 250px;    /* vertical-align: middle; */}

<div id='wrapper'>    <div id='block'> I'm Block </div><div>

Vertical and Horizontal centering a div inside another

Demo Fiddle

For vertical centering, make the wrapping div set to display-table and the child to display:table-cell with vertical-align:middle. Horizontal centering can then simply be accomplished with text-align:center;

Try the CSS:

.header {
    height: 600px;
    display:table;
    width:100%;
}
.homeImageText {
    height:100%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

center a div inside another div vertically

Here solution:

.content {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

Vertically Centering a Div Inside Another Div