整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eb前端開(kāi)發(fā)知識(shí)點(diǎn),web前端教程
層疊樣式表(英文全稱:CascadingStyleSheets)是一種用來(lái)表現(xiàn)html(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集)等文件樣式的計(jì)算機(jī)語(yǔ)言。css不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
CSS能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)精確控制，支持幾乎所有的字體字號(hào)樣式，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力。
文字的水平垂直居中
text-align:center;
line-height:當(dāng)前元素高度;
元素的水平垂直居中
1使用絕對(duì)定位
/*需要固定寬高*/
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:xxx;
height:xxx
margin:auto;
2使用絕對(duì)定位+calc()
/*需要知道具體的元素寬高值*/
position:absolute;
width:xxx;
height:xxx;
top:calc(50%-xxx/2);
left:calc(50%-xxx/2)
3.使用絕對(duì)定位+transform
/*不需要知道元素的寬高*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
4.使用display:flex;
display:flex;
justify-content:center;
align-items:center;
CSS為HTML標(biāo)記語(yǔ)言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在web設(shè)計(jì)領(lǐng)域是一個(gè)突破，利用它可以實(shí)現(xiàn)修改一個(gè)小的樣式更新與之相關(guān)的所有頁(yè)面元素。
以上是酷仔今日整理的“Web前端基礎(chǔ)教程：CSS中幾種常用的水平垂直居中對(duì)齊方法”一文，希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。
個(gè)視頻來(lái)說(shuō)一下CSS布局里面比較基礎(chǔ)，但是非常重要的一個(gè)知識(shí)點(diǎn)：居中布局。這里我會(huì)給大家介紹幾種實(shí)現(xiàn)水平垂直居中的方法。有的方法比較推薦大家使用，有的作為了解就可以了。這里我寫(xiě)了兩個(gè)div，現(xiàn)在要做的就是讓小的紅色這個(gè)div在外面大的div里面水平垂直同時(shí)居中。接下來(lái)我說(shuō)的這幾種方法里面，前面兩種是我比較推薦大家來(lái)使用的。
·第一種，用彈性盒布局，讓它里面的元素在主軸和側(cè)軸同時(shí)居中就可以了。這個(gè)方法是現(xiàn)在大家用的比較多，也比較容易理解的方法。沒(méi)問(wèn)題，現(xiàn)在紅色這個(gè)div已經(jīng)水平垂直都居中了，來(lái)恢復(fù)一下。
·第二種，這里可以用定位，容器開(kāi)啟相對(duì)定位，然后子元素設(shè)置絕對(duì)定位，再把top和left都設(shè)置成50%。現(xiàn)在其實(shí)是把紅色的div的左上角移到外面大的div的中心點(diǎn)，所以只要把紅色這個(gè)div往上面移動(dòng)高度的一半，還有往左邊移動(dòng)寬度的一半，這樣就可以實(shí)現(xiàn)水平和垂直同時(shí)居中了。
這里只要弄清楚這幾個(gè)50%是參考誰(shuí)來(lái)進(jìn)行計(jì)算的就可以了。
→首先是top left，這個(gè)50%是參考它的包含塊，這里也就是它的父元素的寬高來(lái)進(jìn)行計(jì)算的，所以就會(huì)把它的左上角定位到父元素的中心點(diǎn)平移的50%，就是參考它自身的寬高來(lái)進(jìn)行計(jì)算的。負(fù)就是往回走，這樣就剛好可以實(shí)現(xiàn)水平和垂直同時(shí)居中。OK，沒(méi)有問(wèn)題。
→這兩種方法是我比較推薦大家來(lái)使用的，也是比較容易理解的。再來(lái)恢復(fù)一下。再來(lái)說(shuō)兩種方法，大家作為了解就可以了。這里同樣也是用到定位，再設(shè)置四個(gè)方向的偏移值都為0，再配合margin為auto，同樣是可以實(shí)現(xiàn)水平和垂直都居中了。
為什么不推薦這個(gè)方法？因?yàn)檫@里其實(shí)是靠外邊距配合定位，把內(nèi)容區(qū)域頂?shù)街虚g的，盒子其實(shí)是被撐大了的，只是肉眼看不出來(lái)。
現(xiàn)在這個(gè)盒子的模型不一定是我們想要的，當(dāng)然這個(gè)方法某些情況下是可以用的，再把它恢復(fù)一下。
·再來(lái)說(shuō)一種比較特殊的方法，也是作為了解就可以了。這里我給它添加一個(gè)空的span，然后span我要對(duì)它設(shè)置高度，讓它撐滿整一個(gè)父容器。但是span它是行內(nèi)元素，對(duì)它設(shè)置高度是不起效的，所以還要把它轉(zhuǎn)換成行內(nèi)塊，不單止它。
紅色的div同樣也要設(shè)置成行內(nèi)塊元素。現(xiàn)在我們就有了兩個(gè)行內(nèi)塊元素了，是不是就可以設(shè)置它們的基線對(duì)齊方式，設(shè)置成中線對(duì)齊。
→這個(gè)空的div同樣要設(shè)置成中線對(duì)齊，所以現(xiàn)在紅色的這個(gè)div和span它們就要進(jìn)行中線對(duì)齊。然后span的高度又是撐滿整一個(gè)父容器。這樣看起來(lái)紅色的div就垂直居中了。但實(shí)際上是旁邊這里有一個(gè)空的span，它的高度是撐滿整一個(gè)父容器的。然后它和紅色的div中線對(duì)齊，所以紅色的div看起來(lái)就垂直居中了。
那水平局中怎么處理？非常簡(jiǎn)單。因?yàn)榧t色的div現(xiàn)在已經(jīng)是一個(gè)行內(nèi)塊元素了，我們就可以對(duì)它設(shè)置text-align，塊級(jí)元素用這種對(duì)齊方式是不行的。最常見(jiàn)是用于對(duì)文字的居中對(duì)齊，OK沒(méi)有問(wèn)題，水平和垂直都居中了。
這個(gè)視頻給大家分享了4種方法實(shí)現(xiàn)水平和垂直同時(shí)居中。這里推薦大家主要使用前面兩種方法，后面兩種作為了解就可以了。這個(gè)視頻就到這里感謝大家的收看。
加style
<style type="text/css">
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0; width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
</style>
.......
.....
</div>
<footer class="footer">
<div style="text-align:center;">
Copyright 2019 by Ben
</div>
</footer>
</body>
image.png
效果圖，不管窗口放大還是調(diào)小，footer 都會(huì) 顯示在最底也，也不會(huì)覆蓋content 里面的內(nèi)容。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
