上又要到秋招的時候了,又有不少人打算換工作了。前端在面試中總會被問到的一道基礎題div居中方法,這里給大家總結一下都有哪些常用的方法。
還未偏移一半自身寬高
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
border: solid red 1px;
}
.demo {
position: absolute;
width: 100px;
height: 100px;
border: solid blue 1px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="parent">
<div class="demo"></div>
</div>
</body>
通過flex彈性布局設置垂直居中和水平居中
<style>
.parent {
width: 500px;
height: 500px;
border: solid red 1px;
display: flex;
// 垂直,水平居中
align-items: center;
justify-content: center;
}
.demo {
width: 100px;
height: 100px;
border: solid blue 1px;
}
</style>
<body>
<div class="parent">
<div class="demo"></div>
</div>
</body>
在子元素不知道自身寬高情況,使用transform進行比偏移。
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
border: solid red 1px;
}
.demo {
position: absolute;
border: solid blue 1px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
<div class="demo">居中</div>
</div>
</body>
以上3種是常用的方法,當然還有其他居中方法比如grid布局,table-cell布局等。
之所以整理這類專題的手冊,就是CSS相關的內容實在太碎和零散,同時又夾雜著相關的兼容問題。遇到問題時,我們有時候過度依賴搜索引擎進行求證解決,解決完也沒做認真的歸納和總結。再次遇到此類問題時,我們有可能還不會,這就是我歸納這個手冊的目的,我會把日常工作中經常會用到的高頻CSS相關方法歸納到這個手冊里(有的內容可能來源其它作者),歡迎你持續的訂閱和關注。
今天我們一起來梳理下CSS垂直居中的幾種方法,我們在布局一個頁面時,通常都會用到水平置中和垂直置中,處理水平居中很好處理,不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題,但一直以來最麻煩對齊問題就是「垂直居中」,以下將介紹七種單純利用CSS垂直置中的方式,其實一點也不難(當然跟水平居中比起來難了一點),只需要理解背后的原理就可以輕松應用。
設定行高是垂直居中最簡單的方式,適用于「單行」的「行內元素」 ( inline、inline-block ),例如單行的標題,或是已經設為inline-block屬性的div,若將line-height設成和高度一樣的數值,則內容的行內元素就會被垂直置中,因為是行高,所以會在行內元素的上下都加上行高的1/2,所以就垂直置中了!不過由此就可以看出,為什么必須要單行的行內元素,因為如果多行,第二行與第一行的間距會變超大,就不是我們所期望的效果了。CSS范例:外層div0,內容redbox,讓redbox水平垂直置中。
.div0{ width:200px; height:150px; border:1px solid #000; line-height:150px; text-align:center; } .redbox{ display:inline-block; width:30px; height:30px; background:#c00; }
剛剛第一種方法,雖然是最簡單的方法(適用于單行標題),不過就是只能單行,所以我們如果要讓多行的元素也可以垂直居中,就須要使用偽元素的方式。在此之前,先解釋一下CSS里頭vertical-align這個屬性,這個屬性雖然是垂直置中,不過卻是指在元素內的所有元素垂直位置互相置中,并不是相對于外框的高度垂直居中。(下面的CSS會造成這種樣子的垂直居中)
.div0{ width:200px; height:150px; border:1px solid #000; text-align:center; } .redbox{ width:30px; height:30px; background:#c00; display:inline-block; vertical-align:middle; } .greenbox{ width:30px; height:60px; background:#0c0; display:inline-block; vertical-align:middle; } .bluebox{ width:30px; height:40px; background:#00f; display:inline-block; vertical-align:middle; }
因此,如果有一個方塊變成了高度100%,那么其他的方塊就會真正的垂直居中。
.greenbox{ width:30px; height:100%; background:#0c0; display:inline-block; vertical-align:middle; }
但是我們總不能每次要垂直居中,都要添加一個奇怪的div在里頭吧!所以我們就要把腦筋動到「偽元素」身上,利用::before和::after添加div進到框框內,讓這個「偽」div的高度100%,就可以輕松地讓其他的div都居中。不過不過不過!div記得要把display設為inline-block,畢竟 vertical-align:middle 是針對行內元素,div本身是block,所以必須要做更改!
.div0::before{ content:''; width:0; height:100%; display:inline-block; position:relative; vertical-align:middle; background:#f00; }
看到這邊或許會有疑問,如果今天我的div必須是block,我該怎么讓它垂直居中呢?這時候就必須用到CSS特有的calc動態計算的能力,我們只要讓要居中的div的top屬性,與上方的距離是「50%的外框高度- 50%的div高度」,就可以做到垂直居中,至于為什么不用margin-top,因為margin抓到的是水平高度,必須要用top才會正確。
.div0{ width:200px; height:150px; border:1px solid #000; } .redbox{ position:relative; width:30px; height:30px; background:#c00; float:left; top:calc(50% - 15px); margin-left:calc(50% - 45px); } .greenbox{ position:relative; width:30px; height:80px; background:#0c0; float:left; top:calc(50% - 40px); } .bluebox{ position:relative; width:30px; height:40px; background:#00f; float:left; top:calc(50% - 20px); }
或許有些人會發現,在表格這個HTML里,要實現垂直置中是相當容易的,只需要下一行vertical-align:middle就可以,為什么呢?最主要的原因就在于table的display是table,而td的display是table-cell,所以我們除了直接使用表格之外,也可以將要垂直置中元素的父元素的display改為table-cell,就可以輕松實現,不過修改display有時候也會造成其他樣式屬性的連動影響,需要小心使用。
HTML:
<table> <tr> <td> <div>表格垂直居中</div> </td> </tr> </table> <div class="like-table"> <div>假的表格垂直居中</div> </div>
CSS:
.like-table{ display:table-cell; } td, .like-table{ width:150px; height:100px; border:1px solid #000; vertical-align: middle; } td div, .like-table div{ width:100px; height:50px; margin:0 auto; color:#fff; font-size:12px; line-height: 50px; text-align: center; background:#c00; } .like-table div{ background:#069; }
transform是CSS3的新屬性,主要用于元素的變形、旋轉和位移,利用transform里頭的translateY (改變垂直的位移,如果使用百分比為單位,則是以元素本身的長寬為基準),搭配元素本身的top屬性,就可以做出垂直居中的效果,需要注意的地方是,子元素必須要加上position:relative,不然就會沒有效果喔。
.use-transform{ width:200px; height:200px; border:1px solid #000; } .use-transform div{ position: relative; width:100px; height:50px; top:50%; transform:translateY(-50%); background:#095; }
絕對定位就是CSS里頭的position:absolute,利用絕對位置來指定,但垂直置中的做法又和我們正統的絕對位置不太相同,是要將上下左右的數值都設為0,再搭配一個margin:auto,就可以辦到垂直置中,不過要特別注意的是,設定絕對定位的子元素,其父元素的position必須要指定為relative喔!而且絕對定位的元素是會互相覆蓋的,所以如果內容元素較多,可能就會有些問題。
.use-absolute{ position: relative; width:200px; height:150px; border:1px solid #000; } .use-absolute div{ position: absolute; width:100px; height:50px; top:0; right:0; bottom:0; left:0; margin:auto; background:#f60; }
Flexbox可謂是我們在移動端用的最多的布局方法,因為大部分現代手機瀏覽器都支持這個方法了。Flexbox,使用align-items或align-content的屬性,輕輕松松就可以做到垂直居中的效果喔!
.use-flexbox{ display:flex; align-items:center; justify-content:center; width:200px; height:150px; border:1px solid #000; } .use-flexbox div{ width:100px; height:50px; background:#099; }
由于flexbox布局的屬性眾多,如何方便記憶,筆者贈送大家一張圖:
上圖有可能你看不清楚,此圖高清無碼地址,歡迎下載使用:
https://www.qianduandaren.com/demo/images/flex.png
本文內容參考來源
https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html
由于源文是繁體,筆者在內容上做了一些調整。
以上就是筆者整理的一些垂直居中的方法,由于垂直居中往往會動用到修改display這個屬性,往往會在排版上造成一些影響,例如不該用flexbox 的地方如果用了flexbox,不該用table 的地方用了table,不該用inline-block 的地方用了inline-block,后續反而要多寫許多其他的定位樣式來進行修正,那就有點本末倒置了,因此如何活用這些CSS 垂直居中的方法,就要依據大家的版面結構進行靈活運用啰!^_^ 如果你有其他本文沒有提及到的垂直居中方法,歡迎到留言區進行分析喲。
更多精彩內容,請關注“前端達人”公眾號
論是做web前端還是手機端的前端頁面,我們經常會用到的就是圖片不規則,而我們又需要這個圖片在容器上以水平垂直居中顯示,如上圖。
其實這個也很簡單,直接上我寫的樣式:
CSS:
<style type="text/css">
.img-container{width: 100%; float: left}
.img-container span{width:120px;height:120px;overflow:hidden;position:relative;text-align:center;vertical-align:middle; border:#ccc 1px solid; float: left; margin-left: 20px; padding:7px; display: block;}
.img-container span a{position:absolute;top:50%; left: 50%; transform: translate(-50%, -50%);}
.img-container span a img{max-width:120px;max-height:120px; }
</style>
代碼:
<div class="img-container">
<span>
<a href=""><img src="https://img0.baidu.com/it/u=4137924777,4215971248&fm=26&fmt=auto&gp=0.jpg" alt=""></a>
</span>
<span>
<a href=""><img src="https://img1.baidu.com/it/u=415185236,4221481113&fm=26&fmt=auto&gp=0.jpg" alt=""></a>
</span>
<span>
<a href=""><img src="https://img2.baidu.com/it/u=1654250371,945534091&fm=11&fmt=auto&gp=0.jpg" alt=""></a>
</span>
</div>
*請認真填寫需求信息,我們會在24小時內與您取得聯系。