Question

我的意思是不使用任何其他标签......只需一个标签和CSS。

所以

<style>
  #test{
      width: 100px;
      height: 100px;
      text-align: center;
      border: solid 1px #ff0000;
    }
</style>

<div id='test'>foo</div>

需要垂直居中的东西吗？

以下答案

需要

  display: table-cell;
  vertical-align: middle;

Answer 1

有一种hack-ish解决方法，您可以在<div> display: table-cell;属性，然后是vertical-align: middle;属性，是。

所以完整的CSS将是：

#test{
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  text-align: center;
  border: solid 1px #ff0000;
}

此外，外部样式表是您的朋友。

Answer 2

这是使用您的代码的jsFiddle：

http://jsfiddle.net/EqTsu/2/

添加display: table-cell;将导致元素被视为表格中的单元格，然后您可以使用表格格式化CSS vertical-align: middle;。

Answer 3

Understanding vertical-align, or "How (Not) To Vertically Center Content"

是否可以在div中垂直和水平居中显示文本？

3 个答案: