css - 将一个 div 在另一个 div 内居中 - 对齐中心

Question

我正在创建一个带有旋转文本的选项卡 - 我试图将一个 div 置于另一个 div 的中心，但是我希望 div 的中心对齐，但我遇到了对齐问题:

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;">
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA">
     <div style="position:relative;top:50%">    
       <span style="    font-weight:bold;color:white;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);display:block;">International</span>
    </div>
    </div>
</div>

如何将一个 div 垂直居中在较大的父 div 中，以便我旋转的文本居中？

Answer 1

变换按元素的中心点旋转元素，因此您需要定位 <span> 的中心在转换之前到侧边栏的中心。

首先，您不需要 top:50%包装 div，您可以在跨度上完成所有操作。

• 在转换和任何其他样式之前，您的跨度将显示在边栏的左上角。

• 添加width:500px .为了准确定位中心，跨度必须是固定宽度，比如 500px。我们假设没有文本会比这更长。

• 添加text-align:center .现在文本在我们的固定宽度跨度中正确居中，尽管跨度本身位于错误的位置。

• 添加position:relative ，因此我们可以调整跨度相对于其原始位置的位置。

• 添加top:50%和 margin-top:-10px .由于 50% 设置了上边缘，我们需要用负的上边距补偿以使跨度垂直居中。 10px 是跨度高度的一半。

• 添加left:50%和 margin-left:-250px ，与上面相同，将跨度水平居中。 250px 是 span 固定宽度的一半。

• 最后添加您的转换，它应该正确居中。

生成的 HTML:

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;">
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA">
       <span style="font-weight:bold;color:white;display:block;text-align:center;width:500px;position:relative;top:50%;margin-top:-10px;left:50%;margin-left:-250px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);">International</span>
    </div>
</div>

演示:http://jsfiddle.net/jHrEm/7/