CSS 實現文字豎排居中
在網頁設計中，有時為了美觀的效果，需要讓一些文字沿豎直方向排列。但是，文字垂直排列時，居中對齊卻相對困難。下面我們來介紹一種使用 CSS 實現文字豎排居中的方法。
首先，在 HTML 中定義一個容器元素，并將要垂直排列的文字放在一個 div 元素中，如下：

<div class="container">
<div class="vertical-text">這是要豎排的文字</div>
</div>

然后，我們需要定義這個 container 容器元素的樣式：

.container {
display: flex;
justify-content: center;
height: 200px;
background-color: #ddd;
}

這里，我們使用了 flex 布局，將容器元素內的子元素水平居中。同時，我們也設置了容器元素的高度和背景顏色。
接下來，我們需要設置要垂直排列的 div 元素的樣式：

.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(-180deg);
white-space: nowrap;
margin: auto;
font-size: 24px;
color: #444;
}

這里，我們設置了 div 元素豎排的樣式（writing-mode 和 text-orientation），同時使用 transform 屬性將文字旋轉 180 度。我們還需要設置 white-space 屬性為 nowrap，以避免文字換行。最后，我們將 margin 屬性設為 auto，實現垂直居中。
至此，我們就成功地實現了文字豎排居中的效果。完整的代碼如下：

<div class="container">
<div class="vertical-text">這是要豎排的文字</div>
</div>
<br>
<style>
.container {
display: flex;
justify-content: center;
height: 200px;
background-color: #ddd;
}
<br>
.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(-180deg);
white-space: nowrap;
margin: auto;
font-size: 24px;
color: #444;
}
</style>

通過上述代碼，我們可以方便地實現文字豎排居中的效果，使網頁設計更加多樣化和美觀化。