使div中的文本居中不起作用

Question

我试图在div中创建一个文本，我做了代码说：text-align:center;和padding:30px 0px;但填充不起作用..文本只停留在div的顶部，但应该是在中心..（从上到下）。

也许是因为div的位置是绝对的？

我不知道，请帮帮我

Answer 1

由于div的位置是绝对的，您可以使用top，bottom，left和right属性在div周围添加填充。

Answer 2

text-align: center;用于水平对齐。 对于垂直对齐，您应该使用其他方法。看看这个链接，它会给你所有不同的点点滴滴： https://css-tricks.com/centering-css-complete-guide/

Answer 3

.container {
    position: absolute;
    text-align: center;
    padding : 30px 0;
}

您的CSS可能看起来像上面的CSS代码。如果你给div的绝对位置，你将从dom树中删除div的流量。所以它的宽度可能缩小到文本宽度的内容。所以你需要提到div的宽度，如下所示。它会工作jsfiddlelink

.container {
    position: absolute;
    text-align: center;
    padding : 30px 0;
    width: 100%; 
}

Answer 4

为什么不使用行高：[div的高度] ？

.container {

position: absolute;
height: 100px; (or anything else)
line-height: 100px; (must be the same as the height)
text-align: center;

}

然后它应该居中。我希望我帮了！ ： - ）