如何在具有百分比高度的div中间垂直对齐文本？ [复制]答案

【问题标题】：How to vertically align text in the middle of a div that has a percentage height? [duplicate]如何在具有百分比高度的div中间垂直对齐文本？ [复制]
【发布时间】：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

标签： html css dreamweaver

【解决方案1】：

如果您可以更改标记，则可以使用多种方法来获得所需的结果。

http://jsfiddle.net/vvpn6cge/

因为你有文本（我猜可能是一行或多行），所以你可以使用 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 stackoverflow 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%) 
}

【讨论】：