兩種優(yōu)雅的CSS3垂直居中方法

toddmark 發(fā)布于2019-08-29 12:17 / 3154人閱讀

摘要：摘要面向現(xiàn)代瀏覽器，已經(jīng)提供了很好的方法實(shí)現(xiàn)垂直居中，本文介紹了其中兩種常用的方法，無(wú)需借助額外的結(jié)構(gòu)或代碼，純實(shí)現(xiàn)垂直居中，并且在國(guó)內(nèi)的設(shè)備上都可以兼容。

摘要

面向現(xiàn)代瀏覽器，CSS3已經(jīng)提供了很好的方法實(shí)現(xiàn)垂直居中，本文介紹了其中兩種常用的方法，無(wú)需借助額外的html結(jié)構(gòu)或js代碼，純CSS3實(shí)現(xiàn)垂直居中，并且在國(guó)內(nèi)90%的設(shè)備上都可以兼容。

方法一：transform


    本元素相對(duì)于父元素垂直居中

.container{
    position: relative;
}
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

點(diǎn)我查看demo-1

看起來(lái)相當(dāng)容易理解，就是先把元素下移父元素高度的50%，然后再上移自身高度的50%。
嚴(yán)謹(jǐn)?shù)貋?lái)講，這方法還同時(shí)實(shí)現(xiàn)了水平居中，不需要的話(huà)把left: 50%去掉，并改成transform: translateY(-50%)

transform瀏覽器兼容性

從上圖可見(jiàn)，國(guó)內(nèi)大約90%的設(shè)備都可以支持。

方法二：flex布局

對(duì)需要垂直居中的元素的父元素增加一個(gè)class，

.container{
    display: flex;
    align-items: center;
}

點(diǎn)我查看demo-2

flex布局可做的太多了，單純做垂直居中真的大材小用。

flex布局瀏覽器兼容性

從上圖可見(jiàn)，國(guó)內(nèi)大約90%的設(shè)備都可以支持。

GPU云服務(wù)器云服務(wù)器垂直居中數(shù)據(jù)統(tǒng)計(jì)的兩種方法實(shí)現(xiàn)垂直居中水平垂直居中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111800.html

相關(guān)文章

16種水平居中垂直居中方法

摘要：原文鏈接水平居中若是行內(nèi)元素給其父元素設(shè)置即可實(shí)現(xiàn)行內(nèi)元素水平居中若是塊級(jí)元素該元素設(shè)置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設(shè)置為并且配合作如下設(shè)置是中給屬性新加的一個(gè)屬性值它配合可以輕松實(shí)現(xiàn)水平居中原文鏈接水平居中 1) 若是行內(nèi)元素, 給其父元素設(shè)置 text-align:center,即可實(shí)現(xiàn)行內(nèi)元素水平居中.2) 若是塊級(jí)元素, 該元素設(shè)置 margin...

jerry 2019-08-30 15:54 評(píng)論0 收藏0
案例 - 收藏集 - 掘金

摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開(kāi)發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話(huà)題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶(hù)界面中項(xiàng)目的標(biāo)題。閑話(huà)圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...

張金寶 2019-08-20 17:44 評(píng)論0 收藏0
案例 - 收藏集 - 掘金

摘要：同行這么做使用實(shí)現(xiàn)圓形進(jìn)度條前端掘金在開(kāi)發(fā)微信小程序的時(shí)候，遇到圓形進(jìn)度條的需求。實(shí)現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個(gè)老生常談的話(huà)題了。百度前端技術(shù)學(xué)院自定義前端掘金一標(biāo)簽概念元素表示用戶(hù)界面中項(xiàng)目的標(biāo)題。閑話(huà)圖片上傳 - 掘金作者：孫輝，美團(tuán)金融前端團(tuán)隊(duì)成員。15年畢業(yè)加入美團(tuán)，相信技術(shù)，更相信技術(shù)只是大千世界里知識(shí)的一種，個(gè)人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 評(píng)論0 收藏0
CSS及布局

摘要：經(jīng)過(guò)半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來(lái)的微信小程序開(kāi)發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁(yè)窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。一勞永逸的搞定 flex 布局尋根溯源話(huà)布局一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看...

jaysun 2019-08-29 14:04 評(píng)論0 收藏0
css實(shí)現(xiàn)元素水平垂直居中

摘要：結(jié)構(gòu)如下實(shí)驗(yàn)結(jié)果如下實(shí)現(xiàn)了子元素的水平垂直居中，同時(shí)可觀察到兩張圖溢出的方式不同絕對(duì)定位的溢出或或的溢出 1.絕對(duì)定位，利用負(fù)邊距利用負(fù)邊距實(shí)現(xiàn)子元素居中(相對(duì)于父元素(position:relative))，需已知子元素的width與height；且把子元素的position設(shè)為absolute，絕對(duì)定位；以及設(shè)置left和top為50%；再加上負(fù)邊距，margin-left值為w...

ninefive 2019-08-29 13:46 評(píng)論0 收藏0