如何在不使用高度、行高和填充的情况下对齐 div 中心的文本？答案

【问题标题】：How can I align text in the center of a div without using height, line height and padding?如何在不使用高度、行高和填充的情况下对齐 div 中心的文本？
【发布时间】：2014-02-07 09:44:52
【问题描述】：

如何在不使用高度、行高和内边距的情况下对齐 div 中心的文本？

<div id="slot">
   <p id="element">100 </p>
</div>

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
}

#element {
    text-align: center;
}

【问题讨论】：

标签： html css

【解决方案1】：

我想你想垂直对齐吧？我不知道我是否理解你的要求，但我已经做到了。

HTML

<div id="slot"><p id="element">100 </p></div>

CSS

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    display:table;
    height:150px;
    text-align: center;
}

#element {    
    display:table-cell;
    vertical-align:middle;
}

我只在 CSS 中添加了三行。 display:table 为父母，display:table-cell 为孩子。最后我添加了vertical-align: middle，如果高度增加，则在中间显示文本，并将text-align:center放在容器div中。

Here you have an example

【讨论】：

您也可以指定与父级高度一样大的行高来垂直居中文本，但它仅适用于单行文本

【解决方案2】：

text-align 是真正要在父级上设置的属性，所以放在#slot css 中

http://jsfiddle.net/uFpCL/

#slot {
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
    text-align: center;
}

【讨论】：

将答案标记为对您最有帮助的“答案”（绿色勾号）

【解决方案3】：

如果您希望 #element 标签的内容居中，请采用@newpatriks 的方法。但是，如果您希望 #element 位于 #slot 元素的中间，则可以将此 css 添加到 #slot 元素中：

#slot {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

这样，#slot 的所有子节点都将居中。

http://jsfiddle.net/A7S8h/3/

【讨论】：

【解决方案4】：

我认为你应该探索一下 flexbox。它应该是使用 css 布局的圣杯。快速教程：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

只是想补充一下，对这种方法的支持很薄。
flexbox 规范刚刚稳定。现在由渲染引擎来采用它。这不会花很长时间。

【解决方案5】：

使用边距调整文本

 #slot {
  margin:auto;
    width: 70px;
    border: 2px solid black;
    background-color: #00ffee;
    overflow: hidden;
    text-align: center;
}

现在可以正常使用了。。

jsfiddle

【讨论】：