在div中居中文字？

我有一个30px高和宽500px的div 。 这个div可以包含两行文本，并相应地进行样式化（填充）。 但是有时它只包含一行，我希望它是居中。 这可能吗？

Answer 1

要水平居中，请使用text-align:center 。

要垂直居中，只能使用vertical-align:middle如果在同一行vertical-align:middle有另一个元素与其alignment。
看到它在这里工作。

我们使用一个高度为100％的空跨度，然后将内容放在下一个具有vertical-align：middle的元素中。

还有其他一些技巧，比如使用表格单元格，或者将内容放在一个绝对定位的元素中，顶部，底部，左侧和右侧都设置为零，但是他们都遭遇到跨浏览器兼容性问题。

祝你好运。

Answer 2

我相信你希望文本垂直居中在你的div，而不是（只）水平。 我知道这样做的唯一可靠的方法是使用：

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

在你的div上，它可以与任何数量的线路一起工作。 你可以在这里看到一个testing： http : //jsfiddle.net/qMtZV/1/

一定要检查这个属性的浏览器支持，因为它不支持 – 例如 – 在IE7或更早的版本。

更新02/10/2016

五年之后，这项技术仍然有效，但我相信这个问题有更好更稳固的解决scheme。 由于现在Flexbox支持很好，您可能需要按照以下步骤进行操作： http : //codepen.io/michelegera/pen/gPZpqE 。

Answer 3

HTML

 <div class="outside"> <div class="inside"> <p>Centered Text</p> </div> </div> 

CSS

 .outside { position: absolute; display: table; } .inside { display: table-cell; vertical-align: middle; text-align: center; } 

Answer 4

如果你有一个<div>文本：

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

Answer 5

 div { height: 256px; width: 256px; display: table-cell; text-align: center; line-height: 256px; } 

诀窍是设置line-height高等于div的height 。

Answer 6

添加行高也有帮助。

 text-align: center; line-height: 18px; /* for example. */ 

Answer 7

我可能在这里错过了一些东西，但是你有没有尝试过：

 text-align:center; 

??

Answer 8

你可以尝试在你的CSS中使用属性vertical-align来居中verticaly

 div { vertical-align:middle; } 

如果是尺寸问题，请注意，2条文字线和填充样式很有可能高于30px。

例如，如果你的字体大小是12像素，你的div填充是5像素，一个文本行的div高度将是5px（padding-top）+ 12px + 5px（padding-bottom）= 22px <30px所以没问题，

使用2个文本行div，它将是5px + 12px * 2（2行）+ 5px = 34px> 30px，并且您的div高度将自动更改。

尝试要么增加你的div高度（可能是40px），要么减less你的填充。

希望它会有所帮助

Answer 9

对于父div，使用下面的CSS：

 style="display: flex;align-items: center;" 

Answer 10

这会为你工作吗？

 div { text-align: center; } 

Answer 11

我环顾四周

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

似乎是最stream行的解决scheme

Answer 12

 display: block; text-align: center; 

Answer 13

添加到包含文本的select器

 margin:auto;