如何在具有百分比高度的div中间垂直对齐文本？ [复制]
Posted
技术标签:
【中文标题】如何在具有百分比高度的div中间垂直对齐文本？ [复制]【英文标题】：How to vertically align text in the middle of a div that has a percentage height? [duplicate] 【发布时间】：2014-11-09 07:29:31 【问题描述】：这就是我现在所拥有的。在其他使用vertical-align:middle 并将line-height 设置为与height 属性相同的值的div 中，它应该可以工作！唯一的问题是在这些div 中我使用了像素尺寸而不是百分比。谁能告诉我为什么这不适用于百分比？还将text-size 设置为 50% 也应该使文本大小为 div 的一半，但它真的很小吗？这是怎么回事？
#chooseStateAlabama
width: 20%;
height: 25%;
top: 0;
left: 0;
position: absolute;
background: url(../_images/_unitedStates/_states/chooseStateAlabama.png);
background-size: 100% 200%;
float: left;
color: #FFFFFF;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 50%;
line-height: 25%;
text-align: center;
vertical-align: middle;
【问题讨论】：
您能否发布更多包括 html 在内的代码或创建fiddle？font-size 与父元素的高度无关。它与基本字体大小有关。 line-height 同上。
这就是发生的事情！ jsfiddle.net/L85h8vvj
【参考方案1】：
如果您可以更改标记，则可以使用多种方法来获得所需的结果。
http://jsfiddle.net/v***6cge/
因为你有文本（我猜可能是一行或多行），所以你可以使用 CSS 表格单元格获得结果（见小提琴）。
.outer-container
display: table;
width: 100%;
.txt-vertical-align
display: table-cell;
text-align: center;
vertical-align: middle;
【讨论】：
【参考方案2】：您可以将display:inline-block、height:100%和vertical-align:middle用于文本旁边的单个元素或伪元素（之前或之后）：DEMO
#chooseStateAlabama:before /* this can be an extra tag within HTML structure if pseudo used for other purpose */
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
如果您碰巧有更多内容或多于 1 行，那么也使用一个元素来包装它并应用到它显示和垂直对齐。 DEMO2 to see behavior
【讨论】：
谢谢！做到了！ :) 你能再回答一个问题吗？如何使文本大小响应它所在的 div 的大小？ @figureoa.kyle710 如果没有 javascript，您将无法真正做到这一点。你可以看看 vw 单位，它将屏幕宽度作为参考 你的演示可以使用 5vw 或其他任何东西，因为你使用 % 100% 然后 20% ，这里是 100vw 和 20vw 好吧，也许我得看看一个小的java脚本！再次感谢！！ @figureoa.kyle710 如果您的演示接近您的实际情况，请检查此：jsfiddle.net/L85h8vvj/6（也阅读我之前评论的更新：） 完美！不得不根据我的实际情况调整一些测量值，但我明白了，而且效果很好！非常感谢！【参考方案3】：作为另一种选择，您可以使用 flexbox
display: flex;
justify-content:center;
align-content:center;
flex-direction:column;
（盗自this *** question）
【讨论】：
对于 flex，还有更简单的方法：jsfiddle.net/L85h8vvj/4 container in display:flex : height 和 width 以及一个子集：margin:auto;【参考方案4】：http://jsfiddle.net/L85h8vvj/7/
HTML
<body>
<div class='container4'>
<div>Example :)</div>
</div>
</body>
CSS
body
margin:0px;
div.container4
height: 100%;
width:100%;
position: absolute;
div.container4 div
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
margin-right: 50-%;
transform: translate(-50%, -50%)
【讨论】：
以上是关于如何在具有百分比高度的div中间垂直对齐文本？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章