Is it possible to center div with "absolute" parent? - html

Question

<style type="text/css">
.square {
width:251px;
height:207px;
border: 1px solid #d6d6d6;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1);
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
margin: 10px;
overflow: hidden;
position: relative;
background-color:#fff;
/*display: inline-block;*/
float: left;
cursor: pointer;
text-align: left;
}
.square img {
display: block;
margin: 0px;
padding: 9px;
width:234px !important;
height:190px !important;
position:absolute;
}
.square .caption {
width:214px;
height:170px;
background:#000;
color:#fff;
padding:10px;
position:absolute;
left:9px;
top:9px;
/*display:none;*/
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.square .text{
border:1px dotted #d6d6d6;
margin: 10px;
padding: 5px;
vertical-align: center;
max-height: 100px;
overflow: auto;
}
.square .until {
font-size: 12px;
font-style: italic;
position: absolute;
right: 10px;
bottom: 5px;
}
</style>
<div class="square">
<a href="/" >
<img width="234" height="190" src="files/2011/12/17.jpg" alt="17" title="17"/>
</a>
<a href="/" rel="bookmark">
<div class="caption">
<h2>Half A Beatle</h2>
<div class="text">lol</div>
<div class="until">Until: 01 01 2012</div>
</div>
</a>
</div>
So is it possible to center div in current situation?

Answer 1

It's entirely possible with CSS alone, though you'd need to make some interesting changes that don't work in IE6 / 7.
If your parent container is set to display: table-cell and vertical-align: middle with the child element set to display: inline-block, you'll get a table-like effect where the content is centered in the middle.
See for yourself!

Answer 2

it is little late but here is my answer ...
the trick is to have a helper div besides our text container div like the code below ...
i hope this helps :D
<div style=" position: absolute;
display: inline-block;
top: 20%;
bottom: 20%;
right: 20%;
left: 20%;
background-color: #434154;
text-align: center;">
<div style="display: inline-block;
height: 100%;
vertical-align: middle;"></div>
<div style="position: relative;
color: #FFFFFF;
background-color: #546354;
display: inline-block;
vertical-align: middle;">
THIS IS CENTERED WITHOUT SCRIPTING :D
</div>
</div>

Answer 3

If you know the height of the div you are centering (I'm going to assume it is .text), then you can do:
.square .text {
height: 100px;
top: 50%;
margin-top: -50px; /* This should be half of height */
}
All this does if places the top of the div at 50% of the parent container. The margin-top pushes it up so the center is at the center of the parent.
Edit: Show example using transforms:
.square .text{
border:1px dotted #d6d6d6;
margin: 0 10px;
padding: 5px;
vertical-align: center;
max-height: 100px;
overflow: auto;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
This won't work on browsers that don't support tranforms though. See this http://jsfiddle.net/WEQVK/