Css 无法（垂直）在另一个DIV中居中文本，大小相对为%s
免责声明：我不认为这是重复的，因为我使用相对大小来生成全屏网格布局，而不使用Css 无法（垂直）在另一个DIV中居中文本，大小相对为%s,css,html,Css,Html,免责声明：我不认为这是重复的，因为我使用相对大小来生成全屏网格布局，而不使用px 问题：在这个jsFiddle中，我有四个相等比例的盒子。它们被设计成跨越屏幕宽度并保持正方形。其中包含一些方形div样本（40%x 40%）。我正在努力获得一个文本标签lbl，在bbl中水平和垂直居中 我所看到（并尝试过）的所有示例都不起作用，因为它们要求我知道标签的高度，或者它们使用受浏览器限制的表格布局技巧。我需要按照小提琴的大小来做这件事 有人能帮忙吗？我需要在所有浏览器上使用纯CSS（无JS）解决方案。我感
pxlblbbl表格布局使用相对尺寸和没有固定高度是相当棘手的，但我想我终于找到了问题的答案（如下）。标题应该是；-） 我使用表格更新了您的示例：文本在您使用表格描述的框中对齐，但您不希望这样 添加了一个类似的表：
<table width="100%" height="100%"><tr><td>One line</td></tr> </table></div>
一行
<div class="mycontainer">
<div class="rgRow">
<div class="rgCol" style="background-color:pink">
<div class="boxCol">BOX1</div>
</div>
<div class="rgCol" style="background-color:lightgray">
<div class="boxCol">
<div class="boxLabel">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</div>
</div>
</div>
<div class="rgCol" style="background-color:maroon">
<div class="boxCol">
<div class="boxLabel">One liner</div>
</div>
</div>
<div class="rgCol" style="background-color:yellow">
<div class="boxCol">BOX4</div>
</div>
</div>
</div>
.mycontainer
{
background-color: #000000;
display: inline-table;
}
.rgRow
{
width: 100%;
display: table-row;
}
.rgCol
{
width: 25%;
height: 100%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.boxCol
{
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
.boxLabel
{
text-align: center;
vertical-align: middle;
background-color: blanchedalmond;
overflow: hidden;
margin: 2%;
width: 96%;
height: 96%;
}
框1
比其他blob中的文本多得多。那只敏捷的棕色狐狸跳过了那只懒狗
一班轮
方框4
霉菌携带者
{
背景色：#000000；
显示：内联表；
}
rgRow先生
{
宽度：100%；
显示：表格行；
}
rgCol先生
{
宽度：25%；
身高：100%；
文本对齐：居中；
垂直对齐：中间对齐；
显示：表格单元格；
}
博克斯科尔先生
{
显示：内联块；
宽度：100%；
文本对齐：居中；
垂直对齐：中间对齐；
}
.boxLabel
{
文本对齐：居中；
垂直对齐：中间对齐；
背景颜色：白杏仁；
溢出：隐藏；
利润率：2%；
宽度：96%；
身高：96%；
}
html:
<div class="rgCol boxCol box6" style="background-color:lightgray">
<div class="spacer"></div>
<div class="bc">
css
.spacer {width:100%;padding-bottom:30%;display:block; }
html：
css
.spacer{宽度：100%；填充底部：30%；显示：块；}
事实是，HTML中唯一具有本机流体垂直对齐的标记是表格单元格 CSS没有任何东西可以满足您的需求。今天不行 如果要求是： 1.适用于所有浏览器 2.流体高度 3.垂直定心 4.没有脚本 5.没有桌子 6.你想要的是今天的解决方案，而不是几年后的解决方案 您只剩下1个选项： 1.放弃你的一个要求 否则，这个“谜题”是不完整的。这是对你的要求唯一完全可以接受的回答
。。。如果我能在这个特殊的挑战中得到浪费时间的所有薪水就好了：）不要自虐；放开IE7…：）（据统计，使用它的人并不多。） 我用两种方法对此进行了尝试，一种使用
显示：table行高度。不幸的是，我没有访问PC的权限，所以它们只在Mac10.8.1、iOS 6.0.1 Safari、iOS模拟器5.0和5.1 Safari上的Chrome 25.0.1365.1 canary、FF 18和Safari 6.0中进行测试
display:table
方法在iOS Simulator 5.0和5.1上存在问题，文本没有垂直居中
根据，显示：表格.box6位置：相对，并将.bc
样式更改为：
.bc
<div class="bc">
<div id="line-h-outter">
<span id="line-h-inner">a lot more text than in the other blob. The quick brown fox jumped over the lazy dog</span>
</div>
</div>
<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>
.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? */
}
.divWrapper
{
position:absolute;
top:0px;
padding-top:50%; /* center the top of child elements vetically */
padding-bottom:50%;
height:0px;
}
.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%);
}
.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%);
}
<div class="squareContainer>
<div class="contentWrapper">
<img class="imagePreview" alt="Image preview" src="//URL.jpg">
</div>
</div>
div.squareContainer {
position: relative;
box-sizing: border-box;
height: 0;
padding-bottom: 25%;
width: 25%;
}
div.contentWrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
img.imagePreview {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto; /* This is the important line */
max-height: 90%;
max-width: 90%;
}
<table>
<tr>
<td width="50" height="50" align="center" valign="middle">text</td>
</tr>
</table>