I've been having a lot of trouble with vertically aligning an item in its container. 

I've implemented plenty of suggestions. All of them suggest wrapping the content in another div or container. 

This has caused all sorts of issues for various reasons I won't get into but I would like to choose a new requirement: *That it not be wrapped in another container.*

That lead me to this solution (styles inline for brevity): 

```
<div style="display:table-cell;vertical-align:middle">my content</div>

```

Or this: 

```
<td style="vertical-align:middle">my content</td>

```

I like the first option more than the second because with the second you sort of go, "why is there a Table Cell in the middle of this other content that is independent of a table?"

The reason I'm hesitant to use the first option is because I'm not sure it will work in all browsers. I could say the same about the second option as well. 

Which option is better in terms of semantics and browser support?