css中垂直居中的代碼-tft每日頭條

css中垂直居中的代碼

生活更新时间:2024-10-17 20:23:19

點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天給大家分享一個CSS函數（calc）從認識到如何實現元素居中的事。

沒錯，今天要說的就是calc函數的功能，先來簡單認識一下。
一、認識一下calc函數
這個函數出自于CSS3的功能，可以用來動态計算長度值。不要想太複雜，更不需要說的太多，隻需要記住下面幾點，就足夠了熟悉它了：

第一，可以組合使用不同單位

如百分比，PX，rem等等，舉個例子：

看了吧，上面代碼中DOM的寬度可以使用百分比與PX計算得到，也就是說可以組合不同單位來計算。

第二，使用calc的結果是表達式本身而非結果值

這是什麼意思呢？還是以上面這段CSS代碼為例子，編譯後運行在浏覽器中仍然是一個表達式，而不是表達式計算出來的值，這就意味着寬度可以随父元素寬度變化而變化。如下所示：

從上述效果看出，和認識的一樣。

第三，兼容性及處理辦法

從上圖可以看出，兼容性也還是不錯的，當然，對于一些不兼容的浏覽器我們也會給上一個固定的值。如下所示：

關于這個函數功能認識到這裡，它的作用就非常多了，下面使用它來實現元素的垂直居中。看看怎麼實現。
二、如何實現垂直居中
關鍵代碼如下：

需要注意的是，使用的是top值，而不是margintop，因為margintop拿不到水平的高度值。

如果想簡單實現垂直居中，使用calc也是一種辦法。
總結
文章一開始帶大家了解了calc函數特性，這個是最重要的，因為隻有你記住，知道了它有哪些特點才會将它應用到所有可能應用的場景。發揮這個屬性的作用，實現垂直居中就是其中之一。
,
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活武夷山至善至美茶坊
茉莉花茶曆史悠久，福州作為茉莉花茶的發源地，福州茉莉花茶已經成為了中國國家地理标志産品，而其傳統的窨制工藝也被列入了國家非物質文化遺産名錄。這項國家非物質文化遺産，隻有三位國家級的傳承人，陳光富老師便是其中一位。△陳光富福州茉莉花茶傳統窨制... 2022-11-29
生活什麼時候考慮楞次定律
楞次定律的内容：感應電流的磁場總要阻礙引起感應電流的磁通量的變化對于大部分的高考學生來說，一些實質性、抽象性的内容理解起來可能比較困難，就需要一些技巧作以通俗的認識和理解，小編作為一名高中物理教師，對于一些物理知識有一些簡單的認識，今天呢，... 2022-10-25
生活齊白石蛙出山泉
關注公衆号：金陵藝訊《荀子·大略》中言道：“君子立志如窮，雖天子三公問正，以是非對。君子隘窮而不失，勞倦而不苟，臨患難而不忘細席之言。歲不寒無以知松柏，事不難無以知君子。無日不在是。”何謂君子，并不是隻在行為與外表，而是在最難的時候尚能撐起... 2022-11-20
生活手表金屬表帶扣松掉鍊怎麼修理
我們都知道頂級奢華的瑞士品牌手表每一塊都價值不菲，其中大多數都是配置高端的手工鳄魚皮表帶。與手表一樣，手工鳄魚皮表帶也是價格高昂。因此很多朋友都會覺得，既然表帶價格那麼貴，就應該能使用很長時間。但其實不然，很多朋友即使購買原裝的皮表帶，佩戴... 2022-12-02
生活椒鹽鱿魚的做法
椒鹽鱿魚的做法?材料鱿魚1隻、酒1湯匙、生粉适量腌料：鹽半茶匙、糖半茶匙、酒1茶匙椒鹽：五香粉半茶匙、蒜頭4瓣、辣椒2隻、鹽少許，我來為大家科普一下關于椒鹽鱿魚的做法?下面希望有你要的答案，我們一起來看看吧!椒鹽鱿魚的做法材料鱿魚1隻、酒1... 2022-06-17
生活五大三粗指什麼生肖
五大三粗指什麼生肖?牛五大分别指：手大、腳大、耳大、肩寬、臀肥三粗則為：腰粗、腿粗、脖頸粗淩晨一點至三點,屬醜時，今天小編就來聊一聊關于五大三粗指什麼生肖?接下來我們就一起去研究一下吧!五大三粗指什麼生肖牛。五大分别指：手大、腳大、耳大、肩... 2022-06-09
生活涼皮是用什麼面粉做的
涼皮是用什麼面粉做的?對于做涼皮而言，最好的面粉就是中筋面粉，今天小編就來聊一聊關于涼皮是用什麼面粉做的?接下來我們就一起去研究一下吧!涼皮是用什麼面粉做的對于做涼皮而言，最好的面粉就是中筋面粉。用高筋面粉的話，做出來的涼皮太硬。低筋面粉做... 2022-06-15
生活朱鹮劇情梗概
朱鹮劇情梗概?《朱鹮》太陽照亮山坡的時候，下面我們就來說一說關于朱鹮劇情梗概?我們一起去了解并探讨一下這個問題吧!朱鹮劇情梗概《朱鹮》太陽照亮山坡的時候飛來一隻鳥兒那是一隻朱鹮落在喬木的金冠上它凝視着水面上的太陽像朝聖者望着恒河——在賞析這... 2022-12-12
生活拉肚子的人适合吃什麼食物
拉肚子的人适合吃什麼食物?腹瀉的情況下一般進食流食和容易消化的食物，一般飲食以清淡為主，比如米粥，或者是稀飯加上一點甜菜，現在小編就來說說關于拉肚子的人适合吃什麼食物?下面内容希望能幫助到你，我們來一起看看吧!拉肚子的人适合吃什麼食物腹瀉的... 2022-06-08
生活迪巴拉在羅馬主場首秀
直播吧9月13日訊北京時間9月13日淩晨2:45,意甲第6輪羅馬客場挑戰恩波利。上半場，迪巴拉射門中柱，但随後抓住防守球員失誤世界波破門，尾聲階段班迪内利頭球破門扳平比分！上半場比賽結束，恩波利1-1羅馬！本場賽前，羅馬3勝1平1負積10分... 2022-12-21
生活知豆d2拆電池
今日（6月23日），知豆旗下第二款電動車知豆D2将會正式上市，同時今晚知豆D2還将在天貓商城吉利品牌旗艦店、中國工商銀行電商平台融e購、電動邦網上商城三大電商平台同步上市，并會有100輛知豆D2為消費者提供限時秒殺活動。新車定位于入門級微型... 2022-10-24
生活百香果是直接吃好還是泡水喝好
百香果是一種水果，它可以直接吃也可以用來泡水，那麼百香果直接吃好還是泡水喝好？什麼時間吃百香果最好?百香果的營養價值豐富，色、香、味、營養俱全，不論是直接食用抑或榨成果汁、做成果醬都十分美味。那麼百香果直接吃好還是泡水喝好？什麼時間吃百香果... 2022-12-30
生活奧林匹克花園别墅出租
奧林匹克花園别墅出租?小區基本信息pk小區配套設施PK，我來為大家科普一下關于奧林匹克花園别墅出租?以下内容希望對你有幫助!奧林匹克花園别墅出租小區基本信息pk蘋果社區奧林匹克花園四期區縣商圈雙井東壩小區地址百子灣路32号姚家園路與東壩中路... 2023-01-20
生活問劉十九白居易賞析
問劉十九白居易賞析?賞析通覽全詩，語淺情深，言短味長白居易善于在生活中發現詩情，用心去提煉生活中的詩意，用詩歌去反映人性中的春晖，這正是此詩令讀者動情之處，下面我們就來聊聊關于問劉十九白居易賞析?接下來我們就一起去了解一下吧!問劉十九白居易... 2022-06-16
生活八月五可以做什麼
宜辦賽事北京奧運十年紀十年前有人遺憾落敗十年後有人奮起直追十年前大街小巷歡呼奧運十年後冬奧會已經進入“北京周期”宜婚嫁、分手何婕張馨予結婚嫁給愛情歐豪馬思純當代十大未解之謎分手後真的還能做朋友麼？紀淩塵阚清子催生了2018年最新渣男文案誰還... 2023-01-20
生活現代房屋裝修風水有哪些禁忌
現代房屋裝修風水有哪些禁忌?客廳風水客廳是家庭當中的主要公共空間，為全家人會萃及接待賓客的最佳空間，因此，其風水的關系着整個家運，位置好在整戶宅第的居中，且應在房屋前方，我來為大家科普一下關于現代房屋裝修風水有哪些禁忌?以下内容希望對你有幫... 2022-06-17
生活真物是什麼
真物是什麼?真物，是不變的，因為相比複雜的僞物，真物是單純的好就是好，壞就是壞，喜歡就是喜歡，讨厭就是讨厭，不摻雜任何其他的東西，我來為大家講解一下關于真物是什麼?跟着小編一起來看一看吧!真物是什麼真物，是不變的，因為相比複雜的僞物，真物是... 2022-07-10
生活注冊一級消防工程師都考什麼
注冊一級消防工程師都考什麼?注冊一級消防工程師都考《消防安全技術實務》、《消防安全技術綜合能力》和《消防安全案例分析》3個科目，我來為大家科普一下關于注冊一級消防工程師都考什麼?以下内容希望對你有幫助!注冊一級消防工程師都考什麼注冊一級消防... 2022-06-15
生活 sop報文格式
1.标準作業指導書（簡稱SOP）采用圖文并茂的紙檔（或電子檔）的形式，對制造、裝配中所有的具體動作、使用的工具、刀具和工裝夾具、需要加工、裝配的原材料和零部件（含标準件）、以及每一個工序的具體要求，和先後加工順序做出明确無誤的規定。并采用‘... 2022-11-23
生活玫瑰味飲料瓶身設計
意大利Ferrarelle飲料正負形創意廣告設計, 2023-02-21
生活新版零度可口可樂營銷
近百年來，可口可樂在奧運上的營銷可謂多元又精彩，在北京冬奧會的各級贊助商中，可口可樂再一次脫穎而出，其綠色環保理念和可持續性發展的營銷模式也得到了業内的一緻好評。禹唐體育注：可口可樂公司成立于1886年5月8日，總部位于美國佐治亞州的亞特蘭... 2022-11-01
生活舊衛生間怎麼翻新
舊衛生間怎麼翻新?直接在衛生間的舊瓷磚上面貼上一層薄薄的新瓷磚就行了，市面上有專門的薄瓷磚賣，可以直接覆蓋在舊瓷磚上面，不需要對其進行更換，節省了不少的時間和成本，我來為大家科普一下關于舊衛生間怎麼翻新?下面希望有你要的答案，我們一起來看看... 2022-06-16
生活 80後人生感悟經典語錄
80後人生感悟經典語錄?活得糊塗的人，容易幸福；活得清醒的人，容易煩惱這是因為，清醒的人看得太真切，一較真，生活中便煩惱遍地；而糊塗的人，計較得少，雖然活得簡單粗糙，卻因此覓得了人生的大滋味，我來為大家講解一下關于80後人生感悟經典語錄?跟... 2022-08-12
生活 2022年白露時間
#三農高質量創作大賽第三季#12月21日是冬至節，開始進一九，數九寒天正式來臨。今天全國絕大部分天氣晴好，氣溫有所上升，冬日暖陽非常和煦，對目前的農業諸多方面非常有利。用農村的農諺來說，“冬至晴，萬物成”、“冬至暖，五九寒”、“冬至月中，無... 2022-11-30
生活 steam守望先鋒遊戲叫什麼
steam守望先鋒遊戲叫什麼?守望先鋒是暴雪娛樂公司開發的一款第一人稱射擊遊戲，于2016年5月24日上市，國内由網易公司代理，玩家可以前往戰網客戶端購買遊玩，希望對大家有所幫助，今天小編就來聊一聊關于steam守望先鋒遊戲叫什麼?接下來我... 2022-11-25
生活怎麼護理乳膠衣
怎麼護理乳膠衣?在穿着過程中出汗較少，則不必每次都急于清洗，隻需用濕毛巾搽一搽，晾幹後收藏灑點滑石粉(爽身粉)即可;如果在穿着過程中出汗較多，或較長時間未清洗，則需及時用清水清洗幹淨(不及時清洗，在穿着過程中粘到的油脂、汗液可能加速乳膠的老... 2022-07-15
生活動靜相宜是什麼意思
動靜相宜是什麼意思?動靜相宜即動中有靜，靜中有動，動和靜完美的交融在一起，今天小編就來聊一聊關于動靜相宜是什麼意思?接下來我們就一起去研究一下吧!動靜相宜是什麼意思動靜相宜即動中有靜，靜中有動，動和靜完美的交融在一起。動靜是物質存在的兩種基... 2022-06-29
生活西瓜吃不完可以放冰箱嗎
要問夏天什麼水果最火，那一定是西瓜了！消暑降溫、解渴利尿，超市裡、水果攤到處都是，每次看到都忍不住抱一個回家！“吃瓜群衆”不是白叫的！改革開放以來，我國西瓜産業得到了長足的發展，成為世界上最大的西瓜生産國和消費國。根據聯合國糧農組織FAO公... 2022-11-05
生活金針花肉條怎麼做
金針花肉條怎麼做?五花肉75公克，金針花150公克，蒜頭2粒，辣椒1支，豆豉少許，高湯30㏄，鹽1小匙，米酒1大匙，糖1/2小匙，香油1小匙，我來為大家講解一下關于金針花肉條怎麼做?跟着小編一起來看一看吧!金針花肉條怎麼做五花肉75公克，金... 2022-08-14
生活我的世界怎麼孵化龍蛋
我的世界怎麼孵化龍蛋?我的世界中存在龍蛋，但由于各種龍的特性不同，孵化方式也不同，下面我們就來說一說關于我的世界怎麼孵化龍蛋?我們一起去了解并探讨一下這個問題吧!我的世界怎麼孵化龍蛋我的世界中存在龍蛋，但由于各種龍的特性不同，孵化方式也不同... 2022-06-14

tft每日頭條

> 生活

> css中垂直居中的代碼

css中垂直居中的代碼

相关生活资讯推荐

热门生活资讯推荐

网友关注