html - 文本的垂直对齐方式和另一个内部的 div

Question

HTML

<div id="divTop">divTop</div>
<div id="divBottom">divBottom
<div id="divCenter">divCenter</div>
</div>

CSS

html, body{
    height:100%;
}
#divTop{
    height:50px;
    background:#008080;
    color:#ffffff;
    text-align:center;
    vertical-align:middle;
}
#divBottom{
    height:100%;
    text-align:center;
    vertical-align:middle;
    border:thick solid blue;
}
#divCenter{
    width:50vmin;
    height:50vmin;
   border:medium solid red;     
}

我想要: divCenter 在 divBottom 内水平和垂直居中，所有 div 内的文本也垂直居中。
请帮忙。

jsfiddle 是 here

Answer 1

嗨 SunSky 我 fork 了你的 fiddle 并制作了这个，你可以使用 transformation旋转文本的属性。这应该适用于 webkit 浏览器、mozilla、opera 和 IE9。我没有在早期版本的 IE 上尝试过它，但它至少应该在 IE 版本 7 和 8 中工作。 transform属性适用于提到的浏览器，除了 <=IE8 for IE 7,8 我把 css 属性 writing-mode:tb-lr;和 text-orientation:sideways-lr;在这些较旧的 IE 浏览器中获得所需的效果。你将不得不使用这些值(value)观来获得你真正想要的东西。与 transformations它更容易，因为如果你想将它居中或从 divCenter 的边缘移动它，你只需要将它旋转到你想要的点。只需使用 paddings , 使您使用的框居中 margin-left:auto;和 margin-right:auto;为了使这些工作，你需要有一个 width设置你可以使用 100% 这是 jsfiddle所以你可以看到代码，还有这里的W3 writing-mode documentation .如果您有任何问题或意见，请随时提出/发表意见，希望这对您有所帮助。

编辑:

我没有仔细阅读这个问题，我将把信息留在后面，就像关于文本转换以创建垂直文本的附加信息一样。要使垂直文本居中，您可以查看链接 It's about how to vertically align and how not do it最后的示例可能是您正在寻找的示例，如果这不起作用，Stackoverflow 上的一些问题可以帮助您，这里是链接:

Vertically Align text in a Div有一些指向更多信息的链接。

How do I vertically align text next to an image with CSS?对于这个检查第二个答案，它很简单，并提供了一些很好的技巧和方法来实现你想要的东西。我希望这会有所帮助，并且这就是您真正想要的。这是最新消息jsfiddle它应该像你想要的那样工作，你所要做的就是设置一个 height和 width垂直居中然后将 50% 用于 top属性(property)然后为margin-top属性(property)把height的负半的 div你想居中。如果您需要将此对齐应用于所有 divs只需在每个对应的 div 中使用 CSS 属性或者为了更简单的代码创建一个具有这些属性的 class ( HTML <div class="foo"></div> CSS .foo{} )，并将其添加到您希望文本垂直对齐的元素中。