css3 文字顶部居中 |css高度超出出现滚动条

代码示例：
这是一段需要顶部居中的文字
.text-container{
display: flex;
align-items: center;
justify-content: center;
height: 300px; /*这里需要设置div的高度*/
}
.text-middle{
line-height: 1; /*这里需要设置p标签内文字的行高*/
}

上述代码使用了CSS3的flex布局来实现文字的顶部居中。通过设置div的高度，使其能够充满页面空间。并将p标签的文本设置为行高为1，使文字更紧凑。在p标签的父级元素中添加align-items和justify-content属性，并将它们的值都设置为center，这样就能够使文字在垂直和水平方向上都居中。

这种方法适用于需要在不同设备上显示的网页，同时也更易于维护。如果需要让文字在不同的位置上居中，只需要更改div的高度即可，而不必修改整个布局。

总之，使用CSS3可以轻松解决网页设计中的许多问题，文字顶部居中也不例外。希望能对大家的网页设计工作有所帮助。