點(diǎn)擊上面“藍(lán)字”關(guān)注我們

你是否和小編一樣在編輯一個(gè)版面時(shí)，通常用到水平居中和垂直居中，而水平居中很好處理，不外乎就是設(shè)定margin:0 auto;或是text-align:center;，就能輕松解決掉水平居中的問(wèn)題，但一直以來(lái)最麻煩對(duì)齊問(wèn)題，都是“垂直居中”這個(gè)討人厭的設(shè)定，以下將介紹五種單純利用CSS垂直居中的方法。

方法1：設(shè)定行高(line-height)

設(shè)定行高是垂直居中最簡(jiǎn)單的方式，適用于“單行”的“行內(nèi)元素”(inline、inline-block)，例如單行的標(biāo)題，或是已經(jīng)設(shè)為inline-block屬性的div，若將line-height設(shè)成和高度一樣的數(shù)值，則內(nèi)容的行內(nèi)元素就會(huì)被垂直居中，不過(guò)由此就可以看出，為什么必須要單行的行內(nèi)元素，因?yàn)槿绻嘈?#xff0c;第二行與第一行的間距會(huì)變超大，就不是我們所期望的效果了。示例：

代碼

效果

方法2：絕對(duì)定位

絕對(duì)定位就是CSS里的position:absolute，絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。不過(guò)要特別注意的是，設(shè)定絕對(duì)定位的子元素，其父元素的position必須要指定為relative喔!而且絕對(duì)定位的元素是會(huì)互相覆蓋的，所以如果內(nèi)容元素較多，可能就會(huì)有些問(wèn)題。示例：

代碼

效果

方法3：利用transform

transform是CSS3的新屬性，主要掌管元素的變形、旋轉(zhuǎn)和位移，利用transform里的translateY改變垂直的位移，搭配元素本身的top屬性，就可以做出垂直居中的效果，比較需要注意的地方是，子元素必須要加上position:relative，不然就會(huì)沒(méi)有效果的哦。示例：

代碼

效果

方法4：使用表格或假裝表格

我們發(fā)現(xiàn)在表格這個(gè)HTML里面常用的DOM里，要實(shí)現(xiàn)垂直居中是相當(dāng)容易的，只需要下一行vertical-align:middle就可以，為什么呢?最主要的原因就在于table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直居中元素的父元素的display改為table-cell，就可以輕松達(dá)成，不過(guò)修改display有時(shí)候也會(huì)造成其他樣式屬性的連動(dòng)影響，需要比較小心使用。示例：

代碼

效果

方法5：使用Flexbox

使用align-items或align-content的屬性，輕輕松松就可以做到垂直居中的效果。示例：

代碼

效果

以上就是一些垂直居中的方法，由于垂直居中往往會(huì)動(dòng)用一些屬性，后續(xù)反而要多寫(xiě)其他的定位來(lái)修正，那就有點(diǎn)本末倒置了，因此如何靈活應(yīng)用CSS中的垂直居中的方法，就要靠大家根據(jù)自己的版面結(jié)構(gòu)靈活運(yùn)用了!小編偷偷告訴你關(guān)注我們，更多的干貨與您分享!

不會(huì)配色怎么辦！今天教你從零開(kāi)始學(xué)配色

關(guān)于響應(yīng)式布局，你了解多少

圖片太大怎么？趕快來(lái)優(yōu)化！

SEO優(yōu)化排名，你的網(wǎng)站具有這些特征嗎

我們一起來(lái)學(xué)習(xí)下網(wǎng)頁(yè)中特殊字體的引用

掃碼關(guān)注我們

獲得更多

精彩資訊

總結(jié)

以上是生活随笔為你收集整理的android studio table居中代码_五个方法实例代码详解教你在CSS中实现垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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