如何在 DIV 内垂直和水平对齐 SPAN [重复]

Question

我有以下 HTML 代码：

<div id="slideClick">
    <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;">
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

CSS：

.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}
#slideClick {
    float:left;
    height:90px;
    width:40px;
    background:#EE8D40;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    cursor: pointer;
    text-align: center;
}

显示这个：

如何将SPAN 在蓝色DIV 内水平和垂直居中？

Answer 1

如上所述，这是 CSS 中的一个常见问题，但是当您仅旋转文本跨度时，我看到了棘手的部分。旋转包装器元素，然后从那里居中应该是饼图。

#slideClick{
  -webkit-transform: rotate(90deg);
}

例如，由于设置了高度，因此使用 line-height。

jsfiddle：http://jsfiddle.net/1vnbyL1t/3/

Answer 2

由于您的 div 具有固定大小，因此您可以使用内部跨度的相对位置：

position:relative;
top:35px;
right:17px;

并相应地调整它：http://jsfiddle.net/38dgooxj/2/

Answer 3

我创建了一个JSFiddle，这可能是你想要的

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>

我创建了一个JSFiddle，这可能是你想要的

<div id="slideClick">
    <div>
        <span class="sideMsg">MESSAGES</span>
    </div>
</div>


.sideMsg
{
        color:#333;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:inline-block;
    bottom:0;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-shadow: 0px 0px 1px #333;
    border: 1px solid red;
}

#slideClick {
    float:left;
    height:190px;
    width:200px;
    background:#EE8D40;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}