在另一个 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，你可以在 span 上做这一切。

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

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

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

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

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

• 添加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/