使文本水平和垂直显示在 SPAN 的中心[重复]答案

【问题标题】：Make text appear at the center of the SPAN horizontally and vertically [duplicate]使文本水平和垂直显示在 SPAN 的中心[重复]
【发布时间】：2014-07-01 02:19:35
【问题描述】：

我想在 DIV 中呈现一些文本，这些文本应该出现在 SPAN 的中心 - 垂直和水平。

这是我的 jsfiddle - http://jsfiddle.net/8Syqv/13/

HTML：

 <span>something here</span>

CSS：

身体{ 高度：100%；宽度：100%； }

span {
position: absolute;
border: 1px red solid;
height: 30%;
width: 40%;
text-align: center;
vertical-align: middle;
left: 0;
margin: auto;
top: 0;
right: 0;

}

我看过这些：

Vertical and Horizontal alignment of text with CSS

How to center an element horizontally and vertically?

还有更多……

但是，这里提出的想法不适用于我的 jsfiddle。我想我在这里遗漏了一些东西。不知道是什么>

谢谢

【问题讨论】：

您是否假设您必须设置元素的高度？是像素还是百分比？
跨度必须是position: absolute;吗？
百分比。这个百分比也是根据父元素和兄弟元素的宽度和高度动态计算的。所以，它永远不会被修复。
不，实际上它具有相对位置。但是，在查看 stackoverflow 中存在类似问题的其他 jsfiddle 示例后，我尝试了绝对位置。所以，你可以从头开始
如果您希望内容居中，为什么要设置高度？为什么不给它一个顶部和底部填充并完成呢？ jsfiddle.net/AWU77

标签： javascript html css

【解决方案1】：

这可能会更改您编写问题的 HTML。但我想，这无论如何都会对你有所帮助：

演示：http://jsfiddle.net/8Syqv/39/

（修改后的）HTML

<div>
    <span>something here</span>
</div>

一些CSS

body 
{
    height: 100%;
    width: 100%; 
}

div
{
   border: 1px red solid;
   height: 30%;
   width: 40%;  
   text-align: center;
   left: 0;
   margin: auto;
   top: 0;
   right: 0;
   position: absolute;
}

span 
{  
    display: inline-block; 
    vertical-align: middle;
}

div:after
{
   display: inline-block; 
   vertical-align: middle; 
   height: 100%;
   content:"";
}

【讨论】：

感谢您的解决方案。但是，我必须在我的应用程序中保留最少数量的 HTML 节点。因此，如果您遇到任何不需要包装器的解决方案，我们将不胜感激。 :) 谢谢你
是的，你是对的，如果文字太多的话会让人忘乎所以：P 看这个 --- jsfiddle.net/8Syqv/36
我也被自己的想法冲昏了头脑……我会收工的；）答案已更新……
感谢您的帮助 :) 非常感谢
欢迎您。玩得开心。