html - 如何将旋转的 div 在具有特定宽度的表格元素内居中？

Question

尝试将表格中 td 内的旋转 div 居中，同时为其指定特定的 max-width 时遇到了很多麻烦。我可以使用 vertical-align: middle; 将它完美居中。虽然，当我尝试更改 td 的宽度时，div 会偏离中心。

CSS:

.rotated {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

td {
    vertical-align:middle;
}

td.rotatedParent {
    background-color:red;
    max-width: 36px;
}

我尝试过的:

我试过只旋转 td，然后只旋转子 div，然后只旋转子 p，尽管这些都不起作用。尝试摆弄 displays 和 positions，但仍然没有成功。我无法使用 margin 和 padding 等静态值，因为无法确定 tr 高度的大小。

WORKING EXAMPLE

Answer 1

这将完成工作:

CSS

.rotated {
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin:left top;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin:left top;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin:left top;
    -o-transform: rotate(-90deg);
    -o-transform-origin:left top;
    transform: rotate(-90deg);
    transform-origin:left top;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    text-align: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    height: 36px;
}

.rotated p {
    display: inline-block;
    margin: 0;
    line-height: 36px;
}

td { vertical-align: middle }

td.rotatedParent {
    background-color: red;
    min-width: 36px;
    max-width: 36px;
    text-align: center;
    position: relative;
}

tr { height: 200px }

JSFiddle DEMO