CSS让文字竖着居中 在网页设计中，文字的排版是一个非常重要的环节。如果不能将文字排放得整齐美观，往往给用户带来不良体验，甚至会影响用户的阅读体验。有时候，我们需要将文字竖直排列，这时候需要使用CSS来实现。 要实现竖直排列，我们需要将文字旋转90度，同时将其居中。下面是一段CSS代码，可以帮助我们实现这一功能： pre{ padding: 0; margin: 0; } p{ writing-mode: vertical-lr; text-orientation: upright; padding: 0; margin: 0; text-align: center; display: flex; align-items: center; justify-content: center; height: 200px; width: 50px; background-color: gray; border-radius: 10px; font-size: 20px; color: white; transform: rotate(180deg); } 解析代码： 首先，我们需要将p的布局模式设为 vertical-lr，表示文字从上到下排列，而不是从左到右。text-orientation 的值为upright，表示文字方向指向正常。接下来，我们将文字的对齐方式设置为居中，并使用 flex 属性进行居中布局。最后，我们将 transform 属性设为 rotate(180deg)，这样可以将文字旋转90度，实现竖直排列。 同时，我们为 p 元素设置一个背景颜色，并设置圆角和字体大小，以及字体颜色， 使页面更加美观。 总结： CSS可以帮助我们实现网页上文字的竖直排列，给用户带来更好的阅读体验。通过以上CSS代码，我们能够快速、轻松地实现这一功能，实现更好的排版效果。