CSS在固定寬高的div內(nèi)實(shí)現(xiàn)垂直居中的實(shí)例詳解
haorooms 發(fā)布時間：2016-06-03 11:50:57 作者：Aaron 
我要評論
我要評論這篇文章主要介紹了CSS在固定寬高的div內(nèi)實(shí)現(xiàn)垂直居中的實(shí)例詳解,即在div內(nèi)部元素相對于div垂直居中的方法,需要的朋友可以參考下
需求案例
案例是這樣的，一個外層div,高寬是固定的，但是里面內(nèi)容不是固定的。很多朋友的做法是頭部加一個padding或者margin，這樣，里面內(nèi)容顯得貌似是居中了，但是假如內(nèi)容變化，這樣頭部的固定padding或者margin，始終不變。造成了垂直方向不會居中！
我們知道，假如下面一個div
CSS Code復(fù)制內(nèi)容到剪貼板
- <div class="outer"><div class="inner">haorooms內(nèi)部內(nèi)容</div></div>
樣式是這樣的
CSS Code復(fù)制內(nèi)容到剪貼板
- .outer{text-align:center;vertical-align: middle;width:200px;height:350px;}
vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了，和我上面說的，加margin等等！那對于這種情況，有沒有更好的解決方案呢？
解決方法
思路：加一個cssHack，設(shè)置cssHack的line-height等于外層div的高度，就可以使用vertical-align:middle了！
div如下：
CSS Code復(fù)制內(nèi)容到剪貼板
- <div class="outer">
- <div class="inner">haorooms內(nèi)部內(nèi)容</div><div class="v">cssHack</div>
- </div>
樣式如下：
CSS Code復(fù)制內(nèi)容到剪貼板
- * {
- margin: 0;
- padding: 0;
- }
- .outer {
- background-color: #ccc;
- font-size: 24px;
- height: 350px;
- text-align: center;
- overflow: hidden;
- width: 280px;
- }
- .outer .inner,
- .outer .v {
- display: inline-block;
- zoom: 1;*display: inline; /* 用于觸發(fā)支持IE67 inline-block */
- }
- .outer .inner {
- line-height: 1.8;
- padding: 0 4px 0 5px;
- vertical-align: middle;
- width: 262px;
- }
- .outer .v {
- line-height: 350px;
- text-indent:-9999px;
- width: 1px;
- }
這樣就實(shí)現(xiàn)了div內(nèi)部的垂直居中了！
相關(guān)文章
- 這篇文章主要介紹了CSS水平垂直居中的幾種方法總結(jié),垂直居中是布局中十分常見的效果之一,本文介紹了幾種方法，有興趣的可以了解一下。2016-12-19
- 這篇文章主要為大家詳細(xì)介紹了css讓容器水平垂直居中的7種方式,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-17
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對齊和三列等高自適應(yīng)頁腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12- 這篇文章給大家演示了在不知道高度的情況下圖片如何垂直居中對齊，文中給出了實(shí)例代碼，有需要的朋友們可以參考借鑒。下面來一起看看吧。2016-09-12
深入理解CSS行高line-height與文本垂直居中的原理
本文詳細(xì)介紹了CSS行高屬性line-height與文本垂直居中的原理，通過本文的介紹相信對大家以后使用line-height和設(shè)置文本垂直居中會更加熟練，有需要的可以參考借鑒。下面一2016-08-12Flexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例
下面小編就為大家?guī)硪黄狥lexbox制作CSS布局實(shí)現(xiàn)水平垂直居中的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-27CSS設(shè)置DIV垂直居中的N種方法 兼容IE瀏覽器
這篇文章主要為大家詳細(xì)介紹了兼容IE瀏覽器CSS設(shè)置DIV垂直居中的N種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-05- 這篇文章主要介紹了CSS文本和div垂直居中方法總結(jié)，包括多行文本垂直居中,單行文本垂直居中,子div垂直居中，感興趣的小伙伴們可以參考一下2016-07-04
CSS 實(shí)現(xiàn)垂直居中的幾種方法(必看)
下面小編就為大家?guī)硪黄狢SS 實(shí)現(xiàn)垂直居中的幾種方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-14CSS實(shí)現(xiàn)垂直居中的幾種方法小結(jié)
在前端布局過程中，我們實(shí)現(xiàn)水平居中比較簡單，一般通過margin:0 auto;和父元素 text-align: center;就能實(shí)現(xiàn)。今天小編給大家?guī)砹薈SS實(shí)現(xiàn)垂直居中的幾種方法小結(jié)，感興2019-05-14