How to vertical and horizontal align a div inside another div?

How do I ver开发者_如何学编程tical and horizontal align a div inside another div?

Basically, I'm trying to align <div id="middle2"> inside <div id="middle">.

<div id="middle">
    <div id="middle2">
        <span id="sp1"class="ui-icon ui-icon-circle-triangle-w" style="float:left;"></span>
        <div class="middleContent"></div>
            <span id="sp2" class="ui-icon ui-icon-circle-triangle-e" style="float:left;"></span>
        </div>

This is the CSS I've tried:

.middleContent
{
    background-color: white;
    height: 22px;
    width: 90%;
    border: 1px solid #252C3E;
    float: left;
}
#middle2
{
    margin: auto;
}

http://phrogz.net/css/vertical-align/index.html the article of all articles on this topic.

Are you trying to horizontally align the middle2 div inside the middle div? You haven't specified a width for either, so both divs will have the same width and horizontal align effectively won't do anything here.

I think what you want is to horizontally align the middleContent div inside the middle2 div. Since middleContent is set at 90% width, the effect of the horizontal align should be noticeable. To do this, add the following to your CSS code:

#middle2 {
  text-align: center;
}

#middleContent {
  margin: auto;
}

That should do it. If it's still not working, please update your question with your latest code.