用css讓div垂直置中的方式 - 網頁設計

在網頁排版上，要讓div垂直置中是經常遇到的問題，這裡介紹幾個常見的解決方式。

1.line-height. 這是初學者一開始會學到的方法，雖然相當簡單，但僅適用於單行文字 ... 首頁 文章專區 網頁設計相關文章 用css讓div垂直置中的方式 文章專區 網頁設計相關文章 文章專區MENU 最新文章訊息 網頁設計相關文章 SEO與搜尋行銷相關 網頁程式技術探討 用css讓div垂直置中的方式 在網頁排版上，要讓div垂直置中是經常遇到的問題，這裡介紹幾個常見的解決方式。

1.line-height 這是初學者一開始會學到的方法，雖然相當簡單，但僅適用於單行文字排版，兩行以上的話行距會變大。

範例： SeethePenwEwqWbbyYa(@bok770)onCodePen.   2.偽元素(before，after)+display:inline-block 此方法可適用於單行或多行文字，以及區塊置中 缺點是需多寫一行css（偽元素） 範例： SeethePendqbzpebyYa(@bok770)onCodePen.   3.display:table+table-cell 在最外層寫一個偽table，也就是display:table，然後在要垂直置中的區塊，加上display:table-cell以及vertical-align:middle 範例： SeethePenbxbrgXbyYa(@bok770)onCodePen.   4.Flexbox 最方便彈性的方法，可以讓區塊內容自適應外面的容器，只要在最外層寫上 display:flex、align-items:center;(垂直置中)、justify-content:center;(水平置中)即可 關於Flexbox的排版詳細可見CSS3的flexbox版面配置－flexcontainer(容器)可用的屬性 範例： SeethePenOoLjmYbyYa(@bok770)onCodePen.   更多文章 客製化網站和套版網站的差別-一化網頁設計 客製化網頁設計的優點-一化網頁設計 穿透的Div－CSS的pointer-events屬性 瀏覽器支援度檢測－CSS@support的用法 不用再清除float浮動了！CSS的display:flow-root屬性 網頁設計使用CSS排版對SEO的影響 什麼是RWD(響應式網頁設計、回應式網頁設計)? 回列表頁 Close 關於一化 作品展示 專案側寫 網路行銷 線上問答 文章專區 聯絡我們