給我放在中間

本文參考：[link]https://css-tricks.com/centering-in-the-unknown/

要解決的問題就是：如何把一個元素始終放在相對於其父元素的中間， 而不論父元素和子元素如何在後續中改變大小。

由於這種情況相當普遍， 想必在設計語言之初早就將其考慮在內了，就是常見的position佈局，通過設置left， top的屬性值來放置（具體的可將那一篇文章）。 然而，這僅僅能用在子元素固定大小的情況下， 當子元素變化時，子元素左上角的位置是固定的（設置left， top的話），顯然這就行不通了。

於是呼，可以這樣做：
諸如：

<div class='parent'>
    <div class='child'>Hello world!</div>
</div>

這樣的HTML代碼，可以建立以下的css樣式：

.parent {
          text-align: center;
          white-space: nowrap;}
.parent:before {
          content: '';
          display: inline-block;
          vertical-align: middle;
          margin-right: -0.25em; /* Adjusts for spacing */}
.child {
          display: inline-block;
          vertical-align: middle;

}
其工作方式基本是這樣的：在parent類應用之前先建立一個置於parent父元素中間的空文本塊（關鍵是空文本塊），然後parent類應用， 以文本的形式處理其子元素，按文本垂直對其。最後，子元素以塊的形式調整，放在文本中間。大致就是這樣。

後續再進一步討論這個，現在先用它來解決一個問題：可伸縮的圖片遊覽。