Vertically and Horizontally center a div with overflow hidden - html

Question

I am trying to vertically and horizontally center a div inside another div that has the overflow: hidden I have successfully been able to horizontally center it, but not vertically.
HTML
<div class="outer">
<div class="inner">
<div class="content">
<p>Alot of content</p>
</div>
</div>
</div>
CSS
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
bottom: -50%;
right: -50%;
}
.content {
position: relative;
top: -50%;
left: -50%;
width: 500px;
height: 500px;
}
FIDDLE
Why is my top: -50% being ignored, but my left: -50% is working as expected?

Answer 1

DEMO
Actually fiddle is not clear.
I don't know about horizontal center. So I added it. But if you don't want it skip it.
For vertically center, you may try this:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
text-align:center; //horizontal center
}
.content {
position: relative;
display: table-cell; //<-vertical center
text-align: center; //<-vertical center
width: 500px;
height: 500px;
}

Answer 2

You can always center any element using following code without negative margin hack.
The content will automatically align center from top, bottom, left, right
HTML:
<div class="outer">
<div class="content">
</div>
</div>
CSS:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
position: relative;
}
.content {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
margin: auto;
}

Answer 3

Taken from this article, you can use a class like this as long as you have a declared height:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
If you add that class to your outer div everything should work.

Answer 4

I was trying to avoid using translate3d to solve this for older IE support, but in the end couldn't figure out why my top: -50% didn't work. :(
Here is the CSS I ended up with.
.outer {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.content {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 500px;
}
FIDDLE