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

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

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

摘要

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

方法一：transform


    本元素相對于父元素垂直居中

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

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

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

transform瀏覽器兼容性

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

方法二：flex布局

對需要垂直居中的元素的父元素增加一個class，

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

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

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

flex布局瀏覽器兼容性

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111800.html

相關(guān)文章

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

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

jerry 2019-08-30 15:54 評論0 收藏0
案例 - 收藏集 - 掘金

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

張金寶 2019-08-20 17:44 評論0 收藏0
案例 - 收藏集 - 掘金

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

huangjinnan 2019-08-29 12:54 評論0 收藏0
CSS及布局

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

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

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

ninefive 2019-08-29 13:46 評論0 收藏0