Center div content horizontally

Question

I want to center the content of a div in the vertically in the middle, and tried different examples mentioned in previous articles.

My DIV looks like this:

The content should be in the middle.

I have the follwing HTML

<div id="tailoringCategory">
    <div id="centerContent">
        <img id="btnMenu" src="/Images/menu.png" >
        Tailoring Groups:
        <select id="cbTailoringGroups"></select>
        <img id="btnFilter" src="/Images/filter2.jpg" >
    </div>
</div>

And the follwing stylesheets:

        #tailoringCategory {
            position: absolute;
            top: 20px;
            left: 20px;
            /* width: 635px; */
            width: 30px;
            height: 30px;
            font-family: 'Arial';
            padding: 4px;
            background: #FFFFFF;
            border: 1px solid;
            border-radius: 10px;
            z-index: 1;
            overflow: hidden;
            display: table-cell;
            vertical-align: middle;
        }

        #centerContent {
            display: table-cell;
            width:100%;
            height: 100%;
            vertical-align: middle;
        }

I cannot get it to work

Can s.o. tell me how to do this? The DIV content is hidden and will be expanded by mouseclick

                var expandedTailoring = false;
                $("#btnMenu").click(function () {
                    if (expandedTailoring)
                    {
                        $("#tailoringCategory").animate({ width: "30" });
                        expandedTailoring = false;
                    }
                    else
                    {
                        $("#tailoringCategory").animate({ width: "670" });
                        expandedTailoring = true;
                    }

                });

When i add display: table to the parent div i get the following even i haven't the div expandet:

This is with the following CSS:

        #tailoringCategory {
            position: absolute;
            top: 20px;
            left: 20px;
            /* width: 635px; */
            width: 30px;
            height: 30px;
            font-family: 'Arial';
            padding: 4px;
            background: #FFFFFF;
            border: 1px solid;
            border-radius: 10px;
            z-index: 1;
            overflow: hidden;
            display: table;
            vertical-align: middle;
        }

        #centerContent {
            display: table-cell;
            vertical-align: middle;
        }

At the beginning only the Menu Icon should be shown (width 30px collapsed div) - and without using table it is.