css元素水平垂直居中的方法-tft每日頭條

css元素水平垂直居中的方法

圖文更新时间:2024-12-05 04:39:46

在前端開發過程中，盒子居中是常常用到的。其中，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設置元素的margin: 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來讨論一下實現垂直居中的方法。

1.如圖需實現黃色盒子垂直居中

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）1

代碼如下：

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）2

現在我們需要将sub-box盒子居中；那麼一共有多少種方法呢？

1.我們可以知道外面盒子寬高，裡面盒子寬高也清楚，那麼，就很簡單了，對，就是定位了，首先給外面盒子相對定位，裡面盒子絕對定位就好了

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）3

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）4

2.第二種方法（通過設置div的transform: translate(-50%)，意思是使得div向上、向右平移（translate）自身高度、寬度的一半(50%)）

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）5

上述方法我們都是基于設置div的top值為50%之後，再進行調整垂偏移量來實現居中的。如果使用CSS3的彈性布局（flex）的話，問題就會變得容易多了。

3.通過flex布局，代碼稍微調整一下就ok。

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）6

最終效果：

css元素水平垂直居中的方法（CSS實現垂直居中的常用方法）4

除了上面3中方法之外，當然可能還存在許多的可以實現垂直居中的方法。因為這也是我工作中常用的，大家可以讨論前端的各種知識點，這個也是我第一篇文章，希望可以也大家一起多多分享web前端的知識，後面文章希望越寫越好。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

圖文習武之人的一生追求
從古至今習武之人從運用實踐中積攢經驗中流傳下來的功夫方法要訣可為面面俱到。1：入門引路需口授，功用無息法自修。2：練時無人似有人，用時有人似無人。3：不怕千招會，就怕一招精。4：眼功練得精，克敵占上風。5：眼無神，拳無魂。6：練拳不練功，到... 2022-12-08
圖文種睫毛對自己的睫毛有沒有傷害
我們都知道長長的睫毛看起來眼睛非常的好看，而且長睫毛能夠讓眼睛看起來更有神，因此很多人為了讓自己的睫毛變長都選擇種植睫毛這種整形方法，但是我們必須要注意其實種植睫毛也是有副作用的，那麼到底種植睫毛的副作用有哪些?專家指出睫毛種植的副作用：1... 2023-01-08
圖文什麼成分補水效果好
資料圖。圖據CNN當你覺得渴死了的時候，到底喝什麼更補水？水竟然不是最佳選擇。據CNN9月25日報道，蘇格蘭聖安德魯大學的研究人員對13種常見飲品的補水能力進行了研究，排名出人意料：脫脂牛奶、口服補水溶液、全脂牛奶、橙汁、可樂、健怡可樂、涼... 2023-01-25
圖文濟南男子扶老人被訛事件真相大白
濟南男子扶老人被訛事件真相大白?近日引發熱議的“濟南男子扶起倒地老人卻被訛”事件迎來反轉濟南交警官微1日下午通報，事件系男子超車時摩托車車把與老人自行車車把刮擦緻自行車摔倒(1月2日《齊魯晚報》)，今天小編就來聊一聊關于濟南男子扶老人被訛事... 2023-02-06
圖文函數求導數的方法
我是雲間小白老師。一般情況下，到了高二下學期，基本上所有的學校都要開始高中數學導數部分的學習。一開始便會涉及到函數如何求導的問題。很多學生在剛開始學的時候，最容易遇到兩大問題：一是求導公式、法則太多傻傻分不清；一是複合函數求導弄不明白。今天... 2022-11-09
圖文盧本偉說能看到直播間真實人數
前段時間，我們的前"冠軍打野"選手TBQ在參加一檔電競節目的時候聊了一些以前發生的事。而其中就談到了韋神和盧本偉。當然也有不少網友認為淘寶權在瘋狂消費兩人，因此在随後淘寶權的微博也被爆破了。但在節目中，淘寶權說的一些關于五五... 2022-11-15
圖文怎麼才能做好網絡安全
作者：黃爾文、别富豪網絡是把“雙刃劍”究竟是“阿裡巴巴寶庫”還是“潘多拉魔盒”取決于我們對待它的态度和方法手機已經成為現代人的生活必需品如何引導官兵正确使用智能機，過好“網絡關”成為部隊教育管理的重要課題今天，小鐵收集了相關資料邀請部分官兵... 2022-11-27
圖文碧玺真假怎樣鑒定
碧玺又稱電氣石。在我國，碧玺這個詞最早出現于清代典籍《石雅》中。傳說碧玺也是慈禧太後的最愛。雖然碧玺用作珠寶裝飾的曆史不算長，但是現在它已經成為各大珠寶商的愛用之物。就目前的情況看，其價格僅次于鑽石、紅寶石、藍寶石、祖母綠，且發展勢頭強勁，... 2023-01-28
圖文六種魚有毒
年年有餘是我國勞動人民對于生活的美好向往，每當到了逢年過節，餐桌上總少不了一道魚肉，特别是到了現代社會，随着人們養生保健意識的逐步加強，吃魚似乎已經成為了養生必備。在每個地區都有關于魚肉的特色美食，比如松鼠桂魚、黃河熬鯉魚、糖醋魚等，憑借其... 2023-02-03
圖文魔獸世界70版本增強薩攻略
魔獸世界70版本增強薩攻略?《魔獸世界》懷舊服開了，雖然60級玩家還相當稀少，但已有不少人開始暢想60級後的副本生活而自史以來，稀有職業或專精從來都是《魔獸世界》争論的話題，今天小編跟大家分享一下增強薩的攻略心得，我來為大家科普一下關于魔獸... 2022-10-09
圖文五分鐘了解古羅馬
#歐洲#，人類文明史的重要片區，混子哥決定給大家捋一遍#歐洲史#，今天就從#希臘#、#羅馬#講起吧！, 2023-02-01
圖文檸檬水可以提前一天晚上泡嗎
檸檬水可以提前一天晚上泡嗎?(華東理工大學食品學院金鑫劉少偉教授)檸檬水泡濃點好?不必!有人認為檸檬水要泡濃點好，其實，一片檸檬就可以泡一大瓶水了這樣的檸檬水沒有很濃的酸味檸檬一定要帶皮泡水，因為皮含類黃酮更高，檸檬精油也主要在皮裡面，檸檬... 2023-03-08
圖文有用的多還是有用得多
超級名模伊娜.德拉費雷桑熱在《巴黎女人的時尚聖經》中說：皺紋沒什麼，站的離鏡子遠點兒就好。假如你問我是否害怕變老，我會說：我已經變老了啊。20幾歲時看到眼角的第一條細紋誠惶誠恐，總是想找到一劑良藥能為自己保住稍縱即逝的青春。而當真實的進入了... 2022-10-29
圖文小時候做了一件好蠢的事
1“我再也不給你這個壞蛋學習了！”我聽過一個故事。一個孩子不愛學習，爸爸也沒有好的教育方法，總是打他。孩子開始忍着，後來忍不住了，就和爸爸對罵，氣得大吼一聲“我再也不給你這個xxx（罵人的詞）學習了！”啧啧，再也不給你學習了，到底是給誰學習... 2022-12-26
圖文 307套寫作排比句
307套寫作排比句?排比是把結構相同、相似、意思密切相關、語氣一緻的詞語或句子成串地排列的一種修辭方法，今天小編就來聊一聊關于307套寫作排比句?接下來我們就一起去研究一下吧!307套寫作排比句何為排比？排比是把結構相同、相似、意思密切相關... 2022-10-19
圖文薏米黑米小米哪個減肥
薏米黑米小米哪個減肥?無意中看到一個瘦腿的方子，試試看，有沒有效果薏米其實是非常好的東西，既是常用的中藥，又是普遍、常吃的食物可以祛風濕、可以美容、也可以瘦身但是薏米非常難吃，所以，想要用薏米食療的朋友，一定要忍受薏米的味道和口感有朋友坐月... 2022-12-05
圖文人字筆順田字格寫法
人字兩筆，一筆順天，一筆法地。人生兩步，一步入世，一步出世。人字有兩筆：一筆寫前進，一筆寫後退。不戀頂峰更可貴。一筆寫逆境，一筆寫順境。逆境是熔爐。一筆寫付出，一筆寫收獲。失去的不一定不美麗。一筆寫朋友，一筆寫對手。對手是走向成功的陪練。一... 2023-03-03
圖文幹豆角怎麼儲存到冬天吃
趁夏天豆角便宜，曬成幹豆角能吃一年，簡單幾步，不會吃真虧了進入8月，盛夏季節最便宜的蔬菜就是豆角了，種過豆角的人都知道，豆角結起來能一直從初夏到秋涼，盛夏季節産量更高，房前屋後種幾顆豆角，一家人都吃不完。菜市場現在的長豆角賣到不足1元一斤，... 2022-12-25
圖文擔擔面的底料秘制配方
擔擔面得名于小販賣面挑的扁擔，它幾乎是四川小吃的代表。吃着面條拌着鹵汁，陣陣香氣直撲鼻中，引得口水直流，麻辣鮮香，十分入味。“嗯，再來一碗！”By安小廚520用料豌豆尖50g豬肉餡300g細切面200g碎米芽菜50g香蔥20g姜10g蒜10... 2022-11-22
圖文如何确定預産期方法有哪些
十月懷胎孕婦會認為是300天，其實隻有280天。十月懷胎的日子并不是錯的，隻不過它的算法跟我們平時的月份算法不一樣。孕月是以28天為一個月來計算，而普通月份是以30天為一個月。而懷胎十月就是280天，相當于普通月份的9個月零10天。那麼計算... 2022-11-17
圖文酥香炸雞翅詳細做法
作者：遊魚_uq6o用料翅中8個油适量鹽适量澱粉少許雞蛋1個面包糠适量的做法步驟1、雞翅先腌入味2、裹澱粉3、蘸雞蛋4、裹面包糠5、下鍋炸熟6、蘸番茄醬吃【香哈菜譜，80萬吃貨共同關注的美食原創賬号】（“香哈菜譜”或“xiangha100”... 2023-03-24
圖文周傑倫個人資料簡介星座
#頭條創作挑戰賽#周傑倫的生日是1979年1月18日，摩羯座。他是一位極具人氣的流行樂男歌手，更是一位才華橫溢的音樂創作人，同時也是優秀的演員和導演。周傑倫創作的音樂作品多次獲得音樂大獎，他在華語樂壇的地位少有人能及。他的代表作有《夜曲》、... 2022-12-08
圖文今生隻為遇見你真心真意過一生
今生隻為遇見你真心真意過一生?寫在前面：本文的所有觀點僅限于作者本人觀點，無任何批評或者攻擊、指責他人之意不喜望勿噴謝謝，今天小編就來聊一聊關于今生隻為遇見你真心真意過一生?接下來我們就一起去研究一下吧!今生隻為遇見你真心真意過一生寫在前面... 2022-10-29
圖文海爾阿裡系列電視
海爾阿裡系列電視?随着電視行業的快速發展，人們對顯現技術的要求越來越高，電視的分辨率也從傳統的480P、720P、1080P發展到如今的4K4K憑借高清晰的畫質、自然逼真的畫面效果讓用戶可以接觸“真實的世界”，已經成為衆多消費者心目中的首選... 2023-02-13
圖文人死以後會有什麼變化
都說人固有一死……但是當一個人真的逝世了以後，留在這世間的軀殼還會産生什麼變化嗎？别說我吹水，還真有！不信你往下看……逝者身體會有5個變化，希望你沒見過1.心跳、呼吸停止正常情況下，若是沒有其它的外在條件影響，一個人在死亡以後，其體内的血液... 2023-01-01
圖文下半年粵首冷空氣
冷空氣緻廣州最低氣溫跌破20℃，街頭市民換上秋裝王堅攝中新網廣州10月11日電(記者王堅)廣東11日受冷空氣和晴空輻射降溫共同影響，氣溫繼續下降。當日早晨，粵北仁化、連山最低氣溫跌破10℃，其中，仁化低至9.1℃，創廣東2022年下半年來新... 2022-10-25
圖文斯諾克女裁判團
在國際各類斯諾克台球比賽中，除了職業球手的精彩對決，裁判也十分惹人關注。雖然直播的鏡頭往往很少給到他們，我們經常也隻能聽到他們的聲音，看到他們的身影，但他們在每一場重要比賽中所扮演的角色力量是不容忽視的，關于他們很多故事，鮮為人知卻又無比精... 2022-11-18
圖文做生意錦鯉要養多少條
做生意的人，一般都要請堪輿師來看風水，研究辦公室的選址和布置等，希望能通過指點得以生意興隆。而辦公室風水又涉及到風水魚-錦鯉，它自古以來就是引财造福吉祥的風水好魚，因此很多老闆都會在辦公室養上一缸好看的錦鯉魚，但要養多少條、才會起到财運亨通... 2023-03-19
圖文曆史上關羽到底長什麼樣
前言關羽作為一個相傳悠久的曆史人物，在羅貫中的刻畫下他勇敢，善于作戰，并且對人忠誠。在别人需要幫助的時候勇往直前，永不退縮。他具有忠義精神。他的"忠義"精神流芳千古，影響深遠。在中國漫長的古代史中，關羽既是作為一個曆史人物也... 2022-11-05
圖文八字天幹地支的正确運用
命理學中的十天幹它們分别是：甲、乙、丙、丁、戊、己、庚、辛、壬、癸。五行中的屬性。甲乙木、丙丁火、戊己土、庚辛金、壬癸水。十天幹的排列剛好是五行相生：甲乙木生丙丁火、丙丁火生戊己土、戊己土生庚辛金、庚辛金生壬癸水、壬癸水生甲乙木。1、十天幹... 2023-01-02

tft每日頭條

> 圖文

> css元素水平垂直居中的方法

css元素水平垂直居中的方法

相关圖文资讯推荐

热门圖文资讯推荐

网友关注