麻烦（垂直）居中在具有相对％大小的另一个DIV中的文本 [英] Trouble (vertically) Centering Text in another DIV with relative % sizing
问题描述
免责声明：我不相信这是重复的，因为我使用相对尺寸产生全屏网格布局，而不使用 px 。
Disclaimer: I don't believe this is a duplicate as I'm using relative sizes to produce a full screen grid layout without using px.
问题：在此jsFiddle http://jsfiddle.net/X3ZDy/73/ 我有四个相等比例的盒子。它们被设计成跨越屏幕宽度并保持正方形。其中包含一些样本正方形DIV（40％x 40％）。我在努力得到一个文本标签 lbl 水平和垂直居中 bbl 。
Problem: In this jsFiddle http://jsfiddle.net/X3ZDy/73/ I have four equally proportioned boxes. They are designed to span the screen width and remain square. Contained within them are some sample square DIVs (40% x 40%). I'm struggling though to get a text label lbl horizontally and vertically centered within bbl.
所有我看过（和试过）的例子不工作，因为他们需要我知道我的标签的高度，或者他们使用浏览器限制 table-layout 技巧。
All the examples I've seen (and tried) don't work as they require me to know the height of my label, or they use browser restricted table-layout tricks. I need to do this with all relative sizes as per the fiddle.
任何人都可以帮忙吗？我需要这个工作在所有浏览器与纯CSS（没有JS）解决方案。我很惊讶，它似乎是相当棘手的垂直对齐文本在一个div。我不介意如果我们使用块或内联元素作为文本标签。
Can anyone assist? I need to this to work on ALL browsers with a pure CSS (no JS) solution. I'm astonished that it appears to be quite so tricky to vertically align text in a div. I don't mind if we use block or inline elements as the text label.
请注意，我不是寻找一个TABLE解决方案，这是一个DIV& ;
Please note that I'm NOT looking for a TABLE solution, this is a DIV & CSS puzzle that requires a working jsFiddle.
更多：
感谢所有为你的答案，但对于未来的海报， width == padding-bottom）是使我的DIV成为平方的魔法。这是一个网格布局系统的关键，所以我需要保持这一点。
More: Thanks all for your answers, but for future posters, note that (width == padding-bottom) is the magic that allows my DIVs to be square. It's key to a grid-layout system so I need to maintain that.
更新
这是非常棘手的使用相对尺寸和没有固定的高度，但我想我终于找到了一个问题的答案（下面）。
updated It's pretty tricky working with relative sizes and no fixed heights, but I think I've finally found an answer to the problem (below).
推荐答案
找到了一个解决问题的工作原理。问题是，我看到的几乎所有其他解决方案不能应付，当孩子的大小更改，没有一个高度是已知的。
I think I finally found an answer to the problem that works. The issue is that almost every other solution I've seen can't cope when the child size changes and none of the heights are known. I needed this to work for a responsive all % design where there are no fixed heights anywhere.
我偶然发现这个SO回答垂直对齐使用CSS 3 这是我的灵感。
I stumbled across this SO answer Align vertically using CSS 3 which was my inspiration.
img src =https://i.stack.imgur.com/NA9r7.pngalt =垂直居中的文本>
首先，使用全％设计，您需要一个零高度包装元素作为父元素中的定位占位符;
Firstly, using an all % design, you need a zero height wrapper element to act as a positioning placeholder within the parent element;
<body>
<div class="container">
<div class="divWrapper">
<div class="tx">This text will center align no matter how many lines there are</div>
</div>
</div>
</body>
我的容器在这种情况下是一个简单的方块;
My Container in this case is a simple box tile;
.container
{
margin:2%;
background-color:#888888;
width:30%;
padding-bottom:30%; /* relative size and position on page */
float: left;
position:relative; /* coord system stop */
top: 0px; /* IE? */
}
没有什么特别的，除了它有 这使得这个中心元素的一般问题棘手。它需要被绝对定位，以便我们可以在子元素中使用定位坐标（我认为这可能需要IE中的top）。
So nothing special about that except that it has no height which makes this general problem of centering elements tricky. It needs to be absolutely positioned so that we can uses positioning coordinates in the child elements (I think this may require a 'top' in IE).
接下来，
.divWrapper
{
position:absolute;
top:0px;
padding-top:50%; /* center the top of child elements vetically */
padding-bottom:50%;
height:0px;
}
填充表示任何子元素都将开始在 parent element ，但是这个包装器本身没有高度，在页面上不占用空间。
The padding means that any child elements will start in exactly the middle of the parent element but this wrapper itself has no height and takes up no space on the page.
还没有新的。
最后，我们要集中的子元素。这里的诀窍是让子元素根据自身高度垂直向上滑动。你不能使用50％，因为这是父容器的50％不是我们自己。欺骗性的简单答案是使用变换。我不敢相信我以前没有发现这个;
Finally, the child element we want to center. The trick here to this was to have the child element slide up vertically based on it's own height. You can't use 50%, because that's 50% of the parent container not ourself. The deceptively simple answer is to use a transform. I can't believe I didn't spot this before;
.tx
{
position: relative;
background-color: transparent;
text-align: center; /* horizontal centering */
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); /*IE6, IE7*/
transform: translateY(-50%);
}
这是小提琴
但是，我没有在IE6 +上测试这个，所以如果有人想验证我的矩阵变换非常感谢。
However, I haven't tested this on IE6+ so if somebody would like to verify my Matrix transform I'd appreciate it.
事实证明，甚至需要。这是你需要正确垂直中心;
It turns out that the wrapper isn't even needed. This is all you need to properly vertically center;
.tx
{
width:100%; // +1 to @RonM
position: absolute;
text-align: center;
padding-top:100%;
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/
transform: translateY(-50%);
}
并且更新的小提琴
但仍然不能在IE6工作 - 看看这些转换， t认为这可以为没有JavaScript的遗产做。
And the updated Fiddle
But still not working in IE6 yet - looking at those transforms, I don't think this can be done for that legacy without JavaScript.
这篇关于麻烦（垂直）居中在具有相对％大小的另一个DIV中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
