Vertically Align content

[nnhubbard]

Ok, I have looked over a few of the vertically align tricks, using display: table-cell; vertical-align: middle;, etc. But I am not sure what is the best way to do this nowdays. I have a page with content divs that each have a class, which the height of each cannot be set because of the dynamic content that is added to them. But there is a title inside each div that DOES need to be centered vertically inside each. Any idea what the best way to do this is?

This is only a quick example below, not my real structure.

<div class="itemHold">
<div class="itemTitle">TEST TITLE 1</div>
Some text
</div>

<div class="itemHold">
<div class="itemTitle">TEST TITLE 2</div>
Some text, some more text that will wrap to the next line
</div>

<div class="itemHold">
<div class="itemTitle">TEST TITLE 3</div>
Some text, some more text that will wrap to the next line making this even taller
</div>

[sitehatchery]

<style type='text/css'>
#item{border:1px solid red; width:300px; padding:5px;}
#item-inner{padding-top:6%; padding-bottom:10%;}
h2{margin-top:0;}
</style>





<div id='item'>
<div id='item-inner'>
<h2>Item Title</h2>
something in the middle of the box.something in the middle of the box. something in the middle of the box. something in the middle of the box. something in the middle of the box.
</div>
</div>

[nnhubbard]

<style type='text/css'>
#item{border:1px solid red; width:300px; padding:5px;}
#item-inner{padding-top:6%; padding-bottom:10%;}
h2{margin-top:0;}
</style>





<div id='item'>
<div id='item-inner'>
<h2>Item Title</h2>
something in the middle of the box.something in the middle of the box. something in the middle of the box. something in the middle of the box. something in the middle of the box.
</div>
</div>


Well, that was not exaclty what I was looking for.

The example of what I am trying to do is like this:

[IL14N4]

I'm not sure, if I understand correctly, do you mean positioning a
a title square in the center of a containing cell or block.

If so, are you familiar with relative positioning and offsetting top and left values?

[nnhubbard]

I'm not sure, if I understand correctly, do you mean positioning a
a title square in the center of a containing cell or block.

If so, are you familiar with relative positioning and offsetting top and left values?

Yes, I want to position the tile in the middle of a containing box. And yes, I am familiar with position:relative. The problem with this is, that it positions from the top of the title, rather than centering it between the top and bottom of the containing box. Therefore, if you have one title that is 1 line, and a title that wraps to 2 lines, they will not both be centered.