中心div内容水平

Question

我想将div的内容放在中间的垂直中心，并尝试了之前文章中提到的不同示例。

我的DIV看起来像这样：

内容应该在中间。

我有以下HTML

        #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;
        }

以下样式表：

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

                });

我无法让它工作

可以s.o.告诉我怎么做？隐藏DIV内容，并通过鼠标点击

进行扩展

        #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;
        }

当我将display：table添加到父div时，我得到以下内容即使我没有div expanddet：

这是使用以下CSS：

{{1}}

一开始只显示菜单图标（宽度为30px折叠div） - 并且不使用表格。