Css 垂直对齐div中的文本 下面的代码（也可用AS）不把文本放在中间，正如我理想的那样。我找不到任何方法在div中垂直居中文本，即使使用margin top属性也是如此。我该怎么做 <div id="column-content"> <img src="http://i.stack.imgur.com/12qzO.png"> <strong>1234</strong> yet another text content that should be centered vertically </div>

为文本内容创建一个容器，可能是

span

#栏目内容{
显示：内联块；
}
img{
垂直对齐：中间对齐；
}
跨度{
显示：内联块；
垂直对齐：中间对齐；
}
/*用于视觉目的*/
#栏目内容{
边框：1px纯红；
位置：相对位置；
}

1234
还有一个文本内容应该垂直居中

在CSS内容

#列内容strong

中添加垂直对齐：

#column-content strong {
    ...
    vertical-align: middle;
}

也看看你的

==更新===

另一个文本周围有一个跨距，另一个垂直对齐：

HTML:

---

另请参见。

这只是简单地假设可以工作：

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

---

我在你的演示上试过了。

安德烈斯·伊里奇说得对。以防有人漏掉他的评论

A.）如果您只有一行文本：

div
{
高度：200px；
行高：200px；/*接受的答案不适用于多行文本

我更新了JSFIDLE，如下所述：


还有一个文本内容应该垂直居中
#栏目内容{
边框：1px纯红；
高度：200px；
宽度：100px；
}
div{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}

如果你需要多行，这是最简单的方法。将你的
span
文本包装在另一个
span
中，并用
行高指定其高度。多行的诀窍是重置内部
span
的
行高

此处显示您的文本

.textvalignmiddle{
线高：/*设置高度*/；
}
.textvalignmiddle>span{
显示：内联块；
垂直对齐：中间对齐；
线条高度：1em；/*将线条高度设置回正常值*/
}


当然，外部的
span
可能是
div
或您拥有的任何东西。
我知道这完全是愚蠢的，您通常不应该在不创建表时使用表，但是：

表格单元格可以将多行文本垂直居中对齐，甚至在默认情况下也可以这样做。因此，一个非常有效的解决方案可能是这样的：

HTML:

请看这里：
2016年4月10日更新

FlexBox现在应该用于垂直（甚至水平）对齐项目


正文{
高度：150像素；
边框：5px固体青色；
字体大小：50px；
显示器：flex；
对齐项目：居中；/*垂直居中对齐*/
对齐内容：居中；/*水平居中对齐*/
}
Middle
为了使Omar（或Mahendra）的解决方案更加通用，与Firefox相关的代码块应替换为以下内容：

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

当您想在屏幕或其直接祖先中使方框居中时，Omar代码的问题（否则是可操作的）就会出现。此居中可通过将其位置设置为

位置：相对；
或
位置：静态；
（不带位置：绝对或固定）

然后是边距：自动；或边距右侧：自动；边距左侧：自动

在这种框-中心对齐环境下，Omar的建议不起作用。它在InternetExplorer8中也不起作用（但市场份额为7.7%）。因此，对于InternetExplorer8（和其他浏览器），应考虑上述其他解决方案中的解决方法。
尝试以下方法：

HTML

您能否解释一下，当为
span
或span的父元素指定
height
属性时，
vertical align
属性不起作用的原因？具体使用您的演示，我在父元素中添加了
height
属性，以查看
span
是否仍会垂直对齐，但事实并非如此。@Josh这是由于
行高
造成的。如果您将
高度
添加到元素中，其中的文本究竟位于何处？也就是说，如果您有一块
字体大小：10px
（理论上的
高度：10px
）在一个
60px
的容器中，文本到底会在哪里结束？最肯定的是在容器的顶部，因为文本只能在
height:10px
空间中将自身定位在文本流动的位置。但是您可以通过使用与容器相同高度的
行高
值来克服这一问题，这样文本将接受
垂直对齐
属性并正确对齐。@Josh demo:…在容器中添加了100px的高度，在span标记中添加了100px的行高度。这在位置固定的情况下不起作用。这是JSFIDLE demo“起作用”的唯一原因img设置了
vertical align:middle；
set。在容器上设置一个固定的高度，但它不垂直居中：如果使用XHTML transitional作为DOCTYPE，多行解决方案将不起作用。我还必须将文本align:center；添加到父div中。否则，当文本只占用一行时，跨度将小于100%div和应该左对齐。除了不遵守换行符：break-word（在本例中为break-word）外，效果很好。如果您不想以任何方式设置行高，您可以简单地使用
行高：initial；
或……
行高：normal；
：）因此，这个答案就是：“测量有多少像素使文本足够接近，并且硬编码”？不再是了，规范已经改变，上面的大部分内容现在已经被弃用。[使用flexbox的逻辑是合理的，类似于：
display:flex；justify content:center；align items:center；
这是唯一可行的
#column-content span {
    vertical-align: middle;
}

#column-content {
        --------
    margin-top: auto;
    margin-bottom: auto;
}

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

<div class="box">
  <table class="textalignmiddle">
    <tr>
      <td>lorem ipsum ...</td>
    </tr>
  </table>
</div>

.box {
  /* For example */
  height: 300px;
}

.textalignmiddle {
  width: 100%;
  height: 100%;
}

/* Firefox */
display: flex;
justify-content: center;
align-items: center;

<div><span>Text</span></div>

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}