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

css, html

Solution

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/

Problem

``` <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?

Original source