簡言

這個方式應該是比較少見到有人使用的了，這個想法是被老友 Paul 所激發的，writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上關係，它的用途是改變文字書寫的方向從橫書變直書，且支援度從很早期的IE5就有支援了，但當時Amos鮮少使用，一來是網頁多是橫書居多，另外當時除了ＩＥ瀏覽器以外，其他瀏覽器的支援度似乎都不太好，也就很少使用了。

原理說明

writing-mode 本身是設定文字書寫的方向，既然文章書寫方向可以設定直書，那麼就表示我們可以利用直書方式搭配 text-align: center 來讓文字垂直置中囉?! 有了這個想法支後，當然就是馬上試做啦!
Amos 利用 writing-mode 將一整個文字容器也就是 div 區塊變成直書，接著此容器設定 text-align: center 來讓子層達到垂直置中的目的，白話一點的解說的話，就是你把原本橫排的文字，變成直排了，所以原本橫排用到的水平對齊中間(text-align: center)，就變成了控制直排的中間了（垂直置中），原理就是這麼簡單。但要特別注意的是瀏覽器對此語法的支援來說，需要拆開寫法才行，不然某些瀏覽器吃的語法不同，可能會讓你的網頁在某些瀏覽器上看起來無效，這會是最需要注意到的。而有些人可能會發現到各瀏覽器好像有些正常有些不正常，這是由於瀏覽器的語法有新舊兩種寫法，所以如果各位須要讓各個瀏覽器都支援的話，那麼請自行去查一下囉(Amos好壞)。

<div class="box box23">
  <div class="content">
    <div class="txt">
      立馬來看 Amos 實際完成的
      <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
        CSS3精美相簿效果
      </a>
      效果吧！別忘了拖拉一下視窗看看 RWD 效果喔！
      這個置中的想法來自於 Paul 
    </div>
  </div>
</div>

.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  writing-mode: tb-lr; /* for ie11 */
  writing-mode: vertical-lr;
  text-align: center;
  margin:0 auto;
}
.content{
  width: 400px;
  background: #ccc;
  display: inline-block; /* for ie & edge */
  width: 100%;
  writing-mode: lr-tb;
  margin: auto; 
  text-align: left;
}
.box .txt{
  width: 80%;
  margin: auto;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位