div垂直居中怎麼設置css-tft每日頭條

div垂直居中怎麼設置css

生活更新时间:2024-07-28 21:12:36

在實際工作中，經常會遇到容器居中問題，而CSS容器水平和垂直居中的方法，網絡上已經有很多相關文章，在這裡，我也對工作中用到的一些居中方法進行了總結，并加入了一些自己的觀點，如有錯誤歡迎指正。

假設有如下html和樣式，我們需要将inner容器居中：

div垂直居中怎麼設置css（前端必看幹貨有了它）1

一、絕對定位：首先讓outer相對定位relative，其次讓inner絕對定位absolute，同時left和top都是50%，此時inner的左上角在outer的正中間，所以，隻要讓它margin-left和margin-top都是負的自身高度的一半即可：

div垂直居中怎麼設置css（前端必看幹貨有了它）2

效果如下：

div垂直居中怎麼設置css（前端必看幹貨有了它）3

此外，這種寫法的:

margin-left和margin-top也可以換成transform:translate(-100px,-100px)。

注：這裡的inner是必須要有寬高
二、絕對定位2：首先讓outer相對定位relative，其次讓inner絕對定位absolute，四個方向的距離都為0，再加上margin:auto即可：

效果如下：

注：這裡的inner是必須要有寬高的，因為四個方向都為0，一旦不寫寬度，inner就會“觸及底線”。
三、模拟單元格table-cell：因為表格單元格的vertical-align:middle，可以輕松讓裡面的内容垂直居中，這個方法就是利用這個特性來實現垂直居中的：

注：1、outer由于變成了表格，不再像普通的塊容器寬度默認一整行，所以要加上寬度。

2、這個方法既适用于固定高度的容器，也适用于不固定高度的容器。
四、CSS3的flex：outer要變成flex容器，并且垂直居中用align-items: center，水平居中用：justify-content: center

注：此方法非常好用，當然不考慮兼容性。而且，inner無論是否有寬高都适用。
五、CSS3的flex配合margin：此方法可以被視為上面的升級版，outer要變成flex容器，inner邊距自動即可

注：此方法非常好用，當然不考慮兼容性。而且，inner無論是否有寬高都适用。

好東西就要總結起來，好東西就要收藏起來，随着浏覽器兼容性越來越好，上面的很多方法已經可以放心使用了。當然，如果各位有更好的方法，歡迎在下方評論留言哦！
,
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部

网友关注

生活紅柚子吃着苦是怎麼回事
1、未成熟紅柚子中含有一定的柚皮苷，而未成熟的紅柚子中的柚皮苷含量比較豐富，這種物質又帶有一定的苦味... 2023-07-04
生活滁州的由來
“滁”最早為山西省長治市黎城縣一帶地區，古稱“滁邑”，因有古滁水而名（今濁漳河）。商王朝時期，堯的孫子大由就被分封于古滁邑，其族被稱為“滁黎”、“黎方”。到殷商晚期，大由的後裔傳承之國被稱為黎侯國，後被西伯侯所滅。周文王在先後戡滅了黎國、邗國（今河南沁陽）、崇國（今河南嵩縣）等重要諸侯國，并将自己的... 2023-07-04
生活珠海竹仙洞公園門票多少錢，竹仙洞有什...
珠海是個美麗的港灣城市，與香港隔海相對望，也與澳門有着非常近的距離。珠海也如同是廣東省的掌上明珠一般，如今的珠三角也是成了全球最大的都市區，竹仙洞公園就是珠海中美麗的一個風景。那麼，本期珠海文化一起了... 2023-07-04
生活遠離那些傷害過你的人的句子
1、大多數人都會在自己還算順心順意的時候對那些曾經傷害過的人說句謝謝你，傷害我，讓我成長。2、很多人... 2023-07-04
生活豆漿機不轉了是怎麼回事
1、電路問題：我們在使用豆漿機的時候，如果發現它突然不轉了，那麼一定是存在一些問題的。當我們發現豆漿機不傳的時候，首先想到的就是電路問題，我們插上電源之後，如果發現電源指示燈沒有亮，那麼就是電源沒有插好的問題，如果電源指示燈是亮的，但是豆漿機不運轉，那麼我們就要檢查是不是電機卡死或者是轉動不靈等問題... 2023-07-04
生活新資訊！2016年奧運會在哪個國家舉...
我們都知道2008年，奧運會在中國北京舉行，而2012年，奧運會在英國倫敦舉行，那麼迎來今年2016年，又一次四年的奧運會，會在哪個國家舉行呢？小編整理了一些資料，讓我們一起來了解2016奧運會。了解... 2023-07-04
生活逆天邪神主角有多少老婆
1、九個。2、茉莉。茉莉是星神界的公主，星神界屬于王界，非常強大，而茉莉本人的實力恐怕也有神主境七級左右，紅發美眸，完美無瑕。因中毒而不得不依附雲澈，成為雲澈的一師父，在雲澈的成長中離不開茉莉，他們彼此之間也産生了極深的愛意。3、蕭泠汐。她是雲澈的小姑媽，青梅竹馬，然而并沒有血緣關系，曾經因為血緣關... 2023-07-04
生活怎麼挑選安全衛生的紙巾
1、其實紙巾是分為優等品、一等品和合格品這三個檔次的，而超市中打折的紙巾往往都是品格比較差、質量比較低的，所以價格才可以稍微便宜一些。2、一般來說，原生木漿所使用的是新原料，而純木漿紙中很有可能會使用到回收的二手原料。因此，即便紙巾的說明上寫着100%的可信賴标簽，但是大夥在購買時也可不能夠盲目喲。... 2023-07-04
生活北國第一洞府洛陽栾川雞冠洞
“天下名人，中州過半”，作為中華民族與華夏文明的發祥地，河南是中國古都數量最多的省份，也曾湧現出衆多曆史名人，中國四大發明之中，有三種都出自河南，這塊曆史悠久的中原大地，真當得上“人傑地靈”這四個字。... 2023-07-04
生活韓國文化的影響，“哈韓”是典型代表
說到“韓流”是這幾年在中國大陸刮起的一陣風潮，韓國文化的這陣風潮對我國娛樂界和人們的生活可謂沖擊不小，随着韓劇的大量引進和韓國音樂的流行，一些韓國明星和韓國歌手已經深入人心，尤其是對我國青少年的影響更... 2023-07-04
生活放心旅行！2017對中國免簽證國家盤...
趁年輕多讀書多運動多旅行，人生短暫，想做的事情就應該早早行動，别等到頭發花白，才後悔年輕的時候沒有多出去走走，錯過了很多本不該錯過的風景。本期城市文化為您整理，2017年對中國免簽證的國家，你心動了嗎... 2023-07-04
生活誇贊自己的團隊的句子
1、隻要千百萬勞動者團結得像一個人一樣，跟随本階級的優秀人物前進，勝利也就有了保證。2、一滴水隻有放... 2023-07-04
生活棗陽市屬于哪個市
1、棗陽所屬的市：襄陽市。2、棗陽，縣級市，由襄陽市代管，位于湖北省西北部，唐白河入漢水彙合處的東部... 2023-07-04
生活世外桃源廣東連南瑤寨
城市快節奏的生活壓得我們心力交瘁，許多人常說“多希望來一場說走就走的旅行”，其實這并不是什麼難事，當我們心中負壓太重的時候，非常有必要找個美麗且特色的地方放松放松，廣東，連南瑤寨就非常适合我們小假期時... 2023-07-04
生活蒸瘦肉怎麼做更好吃
第一、将瘦肉用清水洗淨，放到攪拌機裡打成肉泥。姜、蒜切末備用。第二、将肉泥取出後，将植物油、蒜末、姜末、醬油放到肉泥中，攪拌均勻，腌制半個小時。第三、半個小時後将澱粉、雞蛋放入腌制好的肉泥中，再攪拌均勻。第四、攪拌均勻後就可以放到蒸爐裡蒸了，蒸出來的瘦肉香氣逼人，松軟可口，适合給嬰兒做輔食。 2023-07-04
生活怎麼直播賣貨
1、滿足用戶的好奇心：面對一些較為複雜、抽象的産品服務類别，比如B2B和醫療，消費者或多或少有點好奇... 2023-07-04
生活 2016年佛牙節是什麼時候，具體哪一...
佛牙節，對于我們來說，可能真的是非常的陌生，對于另一個國度的節日，相對來說，是沒有自己國家的節日來的那麼了解的，本期城市文化，讓小編帶你一起，來了解斯裡蘭卡的佛牙節，看看多有趣。可能感興趣》》北京最熱... 2023-07-04
生活必買前五名：新加坡特産買什麼好
不管你是在新加坡留學還是到新加坡遊玩，等你回國的時候你總會想帶一些新加坡的特産回家，拿一些給自己的親朋好友，也顯得有面子。不過，新加坡有那麼多特産，要買什麼比較好呢？接下來，就和小編一起到新加坡特産中... 2023-07-04
生活 9座城市新星崛起有你所在的城市嗎
自從改革開放以來，中國的經濟在高速的發展，中國的總GDP在短短的幾年已經上升到了全球第二，相信不久就要趕超美國了。那麼你們知道9座新星崛起的城市是那幾座嗎？本期的城市文化，為你解析。從城市經濟本身觀察... 2023-07-04
生活中國東八區有哪些城市
中國東八區有武漢、南京、杭州、蘇州、上海、合肥等。東八區是比世界協調時間/格林尼治時間快8小時的時區，理論上的位置是位于東經112.5度至127.5度之間，是東盟标準的其中一個候選時區。當格林尼治标準時間為0：00時，東八區的标準時間為08：00。在1884年的“國際經度會議&rdquo... 2023-07-04
生活對世界影響深遠的十大帝國
在漫長的世界曆史長河裡，出現過無數個大大小小的國家，其中不乏有震撼世界的大帝國，這些帝國領土遼闊，統治的民族衆多，擁有傳統的、強大的君主制體系，其中的政治、文化、經濟對世界産生了深遠的影響。讓本期城市... 2023-07-04
生活地闆油的用途有哪些
1、地闆油對于地闆的保養功能是非常好的，首先，可以保護木地闆不幹裂，室内溫度或者是濕度長時間的過大，可能會導緻木地闆出現開裂的現象，如果我們定期的使用地闆油對木地闆進行保養，那麼就可以防止這種現象的發生了。2、使用地闆油保養地闆可以有效地放置地闆出現潮濕和發黴的狀況，室内濕度過大或者是其他原因，往往... 2023-07-04
生活微信拜年賀詞
1、點點心意點點情，信息條條傳真情，祝福問候送不停，願你天天好心情，親情愛情樣樣行，工作順心事業成，... 2023-07-04
生活來自河南的民俗活動：2016年浚縣廟...
民間總是會有很多的民俗活動，例如河南民間的地方廟會，每一年都會舉辦得有聲有色。吸引着各地遊客都很喜歡到河南看廟會，關于2016浚縣廟會時間是什麼時候，一起往下看看是如何的吧！廟會榮譽2004年，浚縣正... 2023-07-04
生活雖不明但覺厲的意思
1、“雖不明，但覺厲”，網絡流行詞，簡稱“不明覺厲”，表示“雖然不明白你在說什麼，但好像很厲害的樣子... 2023-07-04
生活除夕的由來
據《呂氏春秋·季冬記》記載，古人在新年的前一天用擊鼓的方法來驅逐“疫疬之鬼”（夕），這就是“除夕”節令的由來。除夕，為歲末的最後一天夜晚。歲末的最後一天稱為歲除，意為舊歲至此而除，另換新歲。除，即去除之意；夕，指夜晚。除夕是歲除之夜的意思... 2023-07-04
生活美麗的冰雪世界南極冰雪高原
海拔在1000米以上，面積寬廣且有陡坡為界限的地區，我們稱之為高原。由于高原海拔較高，輻射強，含氧量少，氣候多為寒冷，濕度低，在這種環境下，高原上的居住人口也就不多。但高原對地球來說也是很重要的，而且... 2023-07-04
生活龍眼沖梢後如何促來花
1、人工摘除小葉：人工摘除花穗上的小葉，并去除頂芽。當花穗主花序軸抽生10～12厘米長，葉腋出現紅色... 2023-07-04
生活糖醋花膠如何做
1、用料：花膠魚300g、西蘭花100g、面粉适量、糖少量、蒜子少許、陳醋适量、食鹽。2、花膠去鰓去... 2023-07-04
生活代表唐山文化的景點有哪些？
從唐山大地震之後，應該有很多人都認識唐山了。而現在的唐山也成了中國抗震首屈一指的城市。還有更多的建築與景點能夠讓人一覽唐山的風貌。這些最具代表性的景點有哪些呢？一起來看看唐山文化景點有哪些？看看你是否... 2023-07-04

tft每日頭條

> 生活

> div垂直居中怎麼設置css

div垂直居中怎麼設置css

相关生活资讯推荐

热门生活资讯推荐

网友关注