資訊專欄INFORMATION COLUMN
摘要：一垂直居中適用于單行文本居中多對(duì)象的垂直居中技巧立馬來看實(shí)際完成的精美相冊(cè)效果效果吧別忘了拖拉一下窗口看看效果喔負(fù)值立馬來看實(shí)際完成的精美相冊(cè)效果效果吧別忘了拖拉一下窗口看看效果喔立馬來看實(shí)際完成的精美相冊(cè)效
一、css垂直居中
1.line-height(適用于單行文本居中)
eg: html:
123
-css: .wordp{width:100px;line-height:50px;background:yellow;color:#fff}
2.:befor+inline-block(多對(duì)象的垂直居中技巧)
eg:html
適用情景：多行文字的垂直居中技巧
在正常的狀況下，align-content 僅能對(duì)次軸多行flex item做居中，但是當(dāng)我今天子層元素不確定有多少個(gè)時(shí)，且有時(shí)可能會(huì)有單個(gè)的情況出現(xiàn)時(shí)，此技巧就能用到了（當(dāng)然你也能有其他解法），既然是多行子元素才能用，那我們就為單個(gè)子組件多加兩個(gè)兄弟吧，使用:before以及:after 來讓子元素增加到多個(gè)，這樣就能使用flex的align-content屬性來居中
11.Flex + align-content
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
.content{
width: 400px;
background: #ccc;
}
.box11:before,
.box11:after{
content: ;
display: block;
width:100%;
}適用情景：多行文字的垂直居中技巧
CSS Grid最令人驚訝的就是這個(gè)template的功能了，簡直就是把塊元素當(dāng)畫布在使用，我們僅需要把模板設(shè)置成三列，就能搞定垂直居中了
12.Grid + template
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
grid-template-areas:
. . .
. amos .
. . .;
}
.content{
width: 400px;
background: #ccc;
grid-area: amos;
}適用情景：多行文字的垂直居中技巧
align-items不僅是Flex可用，連CSS Grid也擁有此屬性可使用，但在Flex中align-items是針對(duì)次軸cross axis作對(duì)齊，而在CSS Grid中則是針對(duì)Y軸做對(duì)齊，你可以把它想象成是表格中儲(chǔ)存單元格的vertical-align屬性看待，就可以很好理解了
13.Grid + align-items
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
align-items: center;
}
.content{
width: 400px;
background: #ccc;
}適用情景：杜航文字的垂直居中技巧
CSS Grid的align-content跟Flex的align-content有點(diǎn)差異，CSS Grid對(duì)于空間的解釋會(huì)跟Flex有一些些的落差，所以導(dǎo)致align-content在Flex中僅能針對(duì)多行元素起作用，但在Grid中就沒這個(gè)問題，所以我們可以很開心的使用align-content來對(duì)子元素做垂直居中，絲毫不費(fèi)力氣
14.Grid + align-content
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
align-content: center;
}
.content{
width: 400px;
background: #ccc;
}適用情景：多行文字的垂直居中技巧
align-self 應(yīng)該大家都不陌生，基本上就是對(duì)grid Y軸的個(gè)別對(duì)齊方式，只要對(duì)單一子層元素設(shè)置為align-self:center就能達(dá)成垂直居中的目的了
15.Grid + align-self
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
justify-content: center;
}
.content{
width: 400px;
background: #ccc;
align-self: center;
}適用情景：多行文字的垂直居中技巧
place-items這屬性不知道有多少人用過，此屬性是align-items與justify-items的縮寫，簡單的說就是水平與垂直的對(duì)齊方式，想當(dāng)然的，設(shè)定center就能居中
16.Grid + place-items
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
height: 150px;
margin: 0 auto;
place-items: center;
}
.content{
width: 400px;
background: #ccc;
}適用情景：多行文字的垂直居中技巧
place-content這屬性有多少人用過，此屬性是align-content與justify-content的縮寫，簡單的說就是水平與垂直的對(duì)齊方式，想當(dāng)然的，設(shè)置center就能居中了
17.Grid + place-content
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
height: 150px;
margin: 0 auto;
place-content: center;
}
.content{
width: 400px;
background: #ccc;
}適用情景：多行文字的垂直居中技巧
繼續(xù)用Grid來居中，由于Grid元素對(duì)空間解讀的特殊性，我們只要在父層元素設(shè)定display:grid，接著在需要垂直居中的元素上設(shè)置margin:auto即可自動(dòng)居中。怎么這描述似曾相識(shí)。
18.Grid + margin
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: grid;
}
.content{
width: 400px;
background: #ccc;
margin:auto;
}適用情景：多行文字的垂直居中技巧
這一招我想有點(diǎn)年紀(jì)的開發(fā)者應(yīng)該都有看過，當(dāng)然像我這么嫩的開發(fā)者當(dāng)然是第一次看到啦，這一招的原理在于使用 CSS display屬性將div設(shè)置成表格的單元格，這樣就能利用支持存儲(chǔ)單元格對(duì)齊的vertical-align屬性來將信息垂直居中
19.display: table-cell
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.content{
width: 400px;
background: #ccc;
margin: auto;
}適用情景：多行文字的垂直居中技巧
Cale是計(jì)算機(jī)英文單詞calculator的縮寫，這個(gè)由微軟提出的css 方法，真的是網(wǎng)頁開發(fā)者的一個(gè)福音。我們竟然可以在網(wǎng)頁中直接做計(jì)算，這真是太猛了，從此我們?cè)僖膊挥迷谀沁吔g盡腦汁的數(shù)學(xué)計(jì)算了，或是想辦法用js來動(dòng)態(tài)計(jì)算，我們可以很輕松的利用calc()這個(gè)方法，來將百分比及時(shí)且動(dòng)態(tài)的計(jì)算出實(shí)際要的是什么高度，真可謂是劃時(shí)代的一個(gè)方法啊，但這個(gè)方法需要注意的是大量使用的話，網(wǎng)頁性能會(huì)是比較差的，所以請(qǐng)謹(jǐn)慎使用。
20.calc
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
}
.content{
width: 400px;
background: #ccc;
position: relative;
top:calc((100% - 70px) / 2);
margin:auto;
height: 70px;
}適用情景：多行文字的垂直居中技巧
這個(gè)技巧是利用了top:50%的招式，讓你的元素上方能產(chǎn)生固定百分比的距離，接著讓要居中的元素本身使用tanslateY的百分比來達(dá)成垂直居中的需求，translate是一個(gè)很棒的屬性，由于translate的百分比單位是利用元素自身的尺寸作為100%，這樣讓我們要利用元素自身寬高做事變得方便很多。
21.relative + translateY(-50%)
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
}
.content{
width: 400px;
background: #ccc;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: auto;
}適用情景：多行文字的垂直居中技巧
什么！這也算垂直居中技巧，連我奶奶都知道這方式吧
對(duì)的，這的確也算是一種垂直居中的方式，不可諱言的這方式真的是簡單過頭了，以至于有些開發(fā)者認(rèn)為這種方式都不能算是一種垂直居中的技巧，但同樣的你無法反駁的是，我的數(shù)據(jù)的確垂直居中啦，好啦，就當(dāng)我硬凹吧，你說的對(duì)，好吧
22.padding
h2{
text-align: center;
}
.box{
width: 500px;
border: 1px solid #f00;
margin: auto;
height: auto;
padding: 50px 0;
}
.content{
width: 400px;
background: #ccc;
margin: auto;
}適用情景：多行文字的垂直劇種技巧
這個(gè)方式應(yīng)該是比較少見到的有人使用的了，這個(gè)想法是被老友Paul所激發(fā)的，write-mode這個(gè)css屬性的功能基本上跟垂直居中是八竿子打不著，它的用途是改變文字書寫的方向從橫變豎，且支持度從很早期的IE5就有支持了，但當(dāng)時(shí)Amos很少使用，一來是網(wǎng)頁多是橫書較多，另外當(dāng)時(shí)除了IE瀏覽器意外，其他瀏覽器的支持度都不是很好，也就很少使用了。
使用write-mode將一整個(gè)文字容器變成直書，接著將此容器利用text-align:center來達(dá)到垂直居中的目的，白話一點(diǎn)的解說就是，你把原本橫排的文字變成豎排，所以原本橫排用到的水平對(duì)齊方式，就變成了控制直排的中間了，原理就是這么簡單。但要特別注意的是瀏覽器對(duì)此語法的支持度來說，需要拆開寫法才行，不然某些瀏覽器的語法不同，可能會(huì)讓你的網(wǎng)頁在某些瀏覽器上看起來無效，這會(huì)是最需要注意到的
23.writing-mode
立馬來看Amos實(shí)際完成的
h2{
text-align: center;
}
.box{
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
writing-mode: tb-lr; /* for ie11 */
writing-mode: vertical-lr;
text-align: center;
margin:0 auto;
}
.content{
width: 400px;
background: #ccc;
display: inline-block; /* for ie & edge */
width: 100%;
writing-mode: lr-tb;
margin: auto;
text-align: left;
}
.box .txt{
width: 80%;
margin: auto;
}文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1841.html
摘要：定寬塊狀元素滿足定寬和塊狀兩個(gè)條件的元素是可以通過設(shè)置左右值為來實(shí)現(xiàn)居中的。設(shè)置方法改變塊級(jí)元素的為類型設(shè)置為行內(nèi)元素顯示，然后使用來實(shí)現(xiàn)居中效果。 做前端這一年多來，其實(shí)一直都是偏向于js前后端，css什么的總是抱著夠用就好的心態(tài)，從來沒有系統(tǒng)的學(xué)習(xí)或總結(jié)過，結(jié)果現(xiàn)在的水平也一直停留在夠用的階段。感覺作為一名合格的前端工程師，不能讓css成為自己的短板，于是簡單的總結(jié)一下，高手繞路。...
摘要：關(guān)于背景圖片的那些小技巧背景圖片太大沒辦法居中顯示怎么辦想完整顯示圖片如何按比例縮放想要在頁面上顯示兩個(gè)空格，應(yīng)該怎么寫代碼在代碼里寫才行。 CSS簡介 想要制作出好看又高大上的網(wǎng)頁，除了編寫好HTML文件外，CSS的編寫也必不可少。CSS的英文全稱是Cascading Style Sheets，即層疊樣式表。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對(duì)網(wǎng)頁各元素進(jìn)行格...
摘要：因?yàn)榫W(wǎng)頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動(dòng)目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強(qiáng)制換行由于中文會(huì)強(qiáng)制換行，但是因?yàn)橛⑽暮蛿?shù)字不會(huì)強(qiáng)制換行。 css基礎(chǔ)—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...
摘要：因?yàn)榫W(wǎng)頁中可能存在中英文，中英文的字體樣式不同。要首先寫英文字體，在寫中文字體。上下移動(dòng)目前可以使用文本修飾下劃線刪除線上劃線無字間距詞間距字間距詞間距和共同使用強(qiáng)制換行由于中文會(huì)強(qiáng)制換行，但是因?yàn)橛⑽暮蛿?shù)字不會(huì)強(qiáng)制換行。 css基礎(chǔ)—字體那些事 1. 首先講字的大小樣式等 字體大小 font-size: 40px; 文字字體 font-family: 宋體,Arial; 文字樣式...
閱讀 769·2023-04-25 19:43
閱讀 4022·2021-11-30 14:52
閱讀 3855·2021-11-30 14:52
閱讀 3909·2021-11-29 11:00
閱讀 3838·2021-11-29 11:00
閱讀 3949·2021-11-29 11:00
閱讀 3613·2021-11-29 11:00
閱讀 6310·2021-11-29 11:00
