css3物件垂直置中的方法-教學撰寫:徐嘉裕Neil hsu

CSS物件垂直置中如果是以前只能用table td屬性中的vertical-align: middle;來定義，後來有CSS3可以透過假表格( display:table-cell;)吧div指定為table屬性後使用vertical-align: middle;但我覺得還是非常不好用，這裡分享兩個css3物件垂直置中的方法讓大家參考一下!

例如我們要做像以下的標題樣式

如果文字多顯示兩行，文字少顯示一行，但都必須垂直置中。

HTML結構

 <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字標題文字標題文字標題文字標題文字</a></div></div>

 <div id='titlebox' ><div><a  href="https://www.blogger.com/">標題文字標題文字</a></div></div>

方法1，使用transform來垂直置中

transform CSS 屬性可以讓你修改 CSS 可視化格式模型（visual formatting model）的空間維度。使用此屬性，元素可以被平移、旋轉、縮放和傾斜。

參考資料來源：https://developer.mozilla.org/zh-TW/docs/Web/CSS/transform

#titlebox{
position: relative;
height: 132px;
background: #ffffff url(../../img/unit/) no-repeat left top;
text-align: center;
font-size: 200%;
overflow: hidden;
}

#titlebox div{
position: relative;

top:50%;

transform:translateY(-50%);

padding: 0px 20px;
max-height:105px;
overflow: hidden;
line-height: 140%;
}

方法2，使用Flexbox來垂直置中--推薦

CSS3 彈性盒子，又稱flexbox，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式。針對許多應用而言，不用 floats 的彈性盒子模型會比塊狀模型（block model）易用，彈性容器的邊緣也不會與內容的邊緣重疊。

參考資料來源：https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

#titlebox{
position: relative;
display:flex;
align-items:center;
justify-content:center;
height: 132px;
background: #ffffff url(../../img/unit/) no-repeat left top;
text-align: center;
font-size: 200%;
overflow: hidden;
}

#titlebox div{
position: relative;
padding: 0px 20px;
max-height:105px;
overflow: hidden;
line-height: 140%;
}

我個人覺得方法2比較好用，這兩個方法都是CSS3最佳物件垂直置中的方法，有需要的朋友可以參考看看!

工作心得分享：徐嘉裕 Neil hsu