文本如何在 div 中垂直对齐中间
Posted
技术标签:
【中文标题】文本如何在 div 中垂直对齐中间【英文标题】：How can a text responsively aligned middle vertically within a div 【发布时间】：2013-10-29 09:59:24 【问题描述】：当已知文本高度时，我知道如何在 div 中垂直对齐文本中心。假设文字的高度是 20px。
用 span 包裹文本。样式 div 和 span。
div
position: relative;
span
display: block
position: absolute;
top: 50%;
height: 20px;
margin-top: -10px;
现在我想响应式对齐文本。我想要的是文本的字体大小与正文的高度成比例。假设我有以下风格：
body
font-size: 100%;
span
font-size: 1.5em;
然后我会在窗口大小改变时改变body的font-size。在这种情况下，文本的高度是不确定的。那么如何让文字居中垂直对齐呢？
我知道我可以使用 javascript 来动态更改跨度的高度和顶部边距。但是我必须在窗口大小改变后这样做。然后有可能是窗口大小发生了变化，然后用户看到文本不在中间，然后执行了JS代码，文本跳转到了div的中间。这可能不是一个可接受的解决方案。
我想知道有没有纯CSS解决方案。
我想我可以使用下面的样式来垂直对齐文本中心。
div
display: table-cell;
vertical-align: middle;
但使用此解决方案，div 的边距无法正确呈现。而且语义不对。
那么有完美的解决方案吗？
【问题讨论】：
那你不是在找这个吗？ jsfiddle.net/Wznmc 边距在此解决方案中不起作用，正如我在说明的最后指出的那样。 我知道你这么说..这就是我问的原因..只是检查一下你是否忽略了一些东西。 【参考方案1】：另一个没有表格显示属性的纯 CSS (CSS3) 解决方案是使用 transform: translateY() 属性。
你需要一个容器 div 和你的文本的内部跨度：
HTML
<div id="container">
<span>Your Text</span>
</div>
CSS
#container
position: relative;
#container span
position: absolute;
top: 50%;
transform: translateY(-50%);
/* Your font-size CSS */
JsFiddle 示例： https://jsfiddle.net/a0m4xnex/1/
您也可以对 translateX 使用相同的水平居中策略。
【讨论】：
【参考方案2】：Helper div可以帮你垂直对齐div
最适合我，你可以相应地改变它
.DivParent
height: 100px;
border: 1px solid lime;
white-space: nowrap;
.verticallyAlignedDiv
display: inline-block;
vertical-align: middle;
white-space: normal;
.DivHelper
display: inline-block;
vertical-align: middle;
height:100%;
<div class="DivParent">
<div class="verticallyAlignedDiv">
<p>Isnt it good!</p>
</div><div class="DivHelper"></div>
</div>【讨论】：
【参考方案3】：使用flex box，您可以这样做：JSBIN
基本上，这里是代码（如果需要记得添加前缀）：
html, body height: 100%; margin: 0px;
body
display: flex;
justify-content: center; /* horizontal centering */
div
align-self: center; /* vertical centering */
<body>
<div>Centered</div>
</body>【讨论】：
以上是关于文本如何在 div 中垂直对齐中间的主要内容，如果未能解决你的问题，请参考以下文章