圖例 在開發(fā)網(wǎng)頁的時候經(jīng)常會碰到使中間元素居中的需求，如果元素都是固定寬高的還好處理一些，但是當(dāng)我們碰到元素都是需要自適應(yīng)時，怎么辦呢？除了我經(jīng)常用css3盒模型來做之外，考慮兼容的話，是不是有其他的替代方式呢？我這里根據(jù)別人分享的經(jīng)驗做一次系統(tǒng)的整理，讓自己也重新學(xué)習(xí)一遍 中間元素固定寬高時的處理方式
實現(xiàn)方式如下：
不固定寬高的上下左右居中的方式
方法一

主要用到偽元素和display：inline-block?和?vertical-align：middle?搞定，但是也有一些問題，他要求居中的元素是inline-block
關(guān)于偽元素可以看這篇介紹關(guān)于inline-block可以看這篇介紹，關(guān)于vertical-align可以看這篇介紹? 不得不說，張鑫旭不愧是大牛啊，他的文章從09年一直更新到17年，值得學(xué)習(xí) 這里介紹一個網(wǎng)站（點擊圖片可打開）
方法二
這種方式采用css3的寫法，不能兼容IE8及以下瀏覽器

具體效果如下：

如果是彈出層，該如何控制其元素居中呢？
效果如下 方法三 利用table布局方法，這種寫法也有問題，具體還沒有遇到
實際效果如下：
方法四
采用css3盒模型來做
實際效果圖如下：
另外有一篇很好的技術(shù)帖子，點擊查看

總結(jié)

以上是生活随笔為你收集整理的元素垂直居中的几种方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。