html div 字体居中 css,CSS-在div中居中显示文字？

CSS-在div中居中显示文字？

我有div 30px高和500px宽。 此div可以包含两行文本，一行在另一行下，并相应地设置样式(填充)。 但是有时它只包含一行，而我希望它居中。 这可能吗？

Rifki asked 2020-08-08T14:45:01Z

13个解决方案

52 votes

要水平居中，请使用vertical-align:middle。

要垂直居中，如果同一行中有另一个要对齐的元素，则只能使用vertical-align:middle。

看到它在这里工作。

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

还有其他技术，例如使用表格单元格或将内容放置在上，下，左和右均设置为零的绝对定位的元素中，但它们都存在跨浏览器兼容性的问题。

SamGoody answered 2020-08-08T14:45:25Z

26 votes

我相信您希望文本在div内垂直居中，而不是(仅)水平居中。 我知道做到这一点的唯一可靠方法是使用：

display: table-cell;

vertical-align: middle;

在您的div上，并且可以使用任意数量的行。您可以在此处查看测试：[http://jsfiddle.net/qMtZV/1/]

确保检查浏览器对此属性的支持，例如，在IE7或更早版本中不支持此属性。

更新02/10/2016

五年后，这种技术仍然有效，但是我相信有更好，更可靠的解决方案。 由于Flexbox的支持非常好，因此您可能需要遵循以下步骤：[http://codepen.io/michelegera/pen/gPZpqE。]

michelegera answered 2020-08-08T14:46:03Z

7 votes

的HTML

Centered Text

的CSS

.outside {

position: absolute;

display: table;

}

.inside {

display: table-cell;

vertical-align: middle;

text-align: center;

}

Lars answered 2020-08-08T14:46:27Z

5 votes

如果

中包含文本：

text-align: center;

vertical-align: middle;

display: table-cell;

enigma969 answered 2020-08-08T14:46:47Z

4 votes

对于父div，请使用以下CSS：

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

Ayan answered 2020-08-08T14:47:06Z

3 votes

div {

height: 256px;

width: 256px;

display: table-cell;

text-align: center;

line-height: 256px;

}

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

Henry Zhu answered 2020-08-08T14:47:26Z

2 votes

添加行高也有帮助。

text-align: center;

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

Schw2iizer answered 2020-08-08T14:47:46Z

1 votes

我在这里可能会丢失一些东西，但是您是否尝试过：

text-align:center;

??

Adam Moss answered 2020-08-08T14:48:10Z

1 votes

您可以尝试在CSS中使用vertical-align属性，以使其居中

div {

vertical-align:middle;

}

如果是尺寸问题，请注意2个文本行和一个填充样式很有可能具有超过30像素的高度。

例如，如果您的字体大小为12像素，而div填充为5像素，则一个文本行的div高度将为5像素(填充顶部)+ 12像素+ 5像素(填充底部)= 22像素<30像素，所以没有问题，

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

尝试增加div高度(可能为40px)或减少填充。

希望对你有帮助

G.K. answered 2020-08-08T14:48:52Z

0 votes

这对您有用吗？

div { text-align: center; }

kaveman answered 2020-08-08T14:49:12Z

0 votes

我环顾四周，

display: table-cell;

vertical-align: middle;

似乎是最受欢迎的解决方案

godzilla answered 2020-08-08T14:49:36Z

0 votes

display: block;

text-align: center;

Dexy86 answered 2020-08-08T14:49:52Z

0 votes

添加到包含文本的选择器中

margin:auto;

Matoeil answered 2020-08-08T14:50:11Z