css垂直居中的7個方法-tft每日頭條

css垂直居中的7個方法

生活更新时间:2024-09-29 08:39:50

css垂直居中的7個方法（CSS中幾種常用的水平垂直居中對齊方法）1

Web前端開發知識點,web前端教程

層疊樣式表(英文全稱:CascadingStyleSheets)是一種用來表現html(标準通用标記語言的一個應用)或XML(标準通用标記語言的一個子集)等文件樣式的計算機語言。css不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。

CSS能夠對網頁中元素位置的排版進行像素級精确控制，支持幾乎所有的字體字号樣式，擁有對網頁對象和模型樣式編輯的能力。

CSS中幾種常用的水平垂直居中對齊方法：

文字的水平垂直居中

text-align:center;

line-height:當前元素高度;

元素的水平垂直居中

1使用絕對定位

/*需要固定寬高*/

position:absolute;

top:0;

left:0;

bottom:0;

right:0;

width:xxx;

height:xxx

margin:auto;

2使用絕對定位 calc()

/*需要知道具體的元素寬高值*/

position:absolute;

width:xxx;

height:xxx;

top:calc(50%-xxx/2);

left:calc(50%-xxx/2)

3.使用絕對定位 transform

/*不需要知道元素的寬高*/

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

4.使用display:flex;

display:flex;

justify-content:center;

align-items:center;

CSS為HTML标記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在web設計領域是一個突破，利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。

以上是酷仔今日整理的“Web前端基礎教程：CSS中幾種常用的水平垂直居中對齊方法”一文，希望為正在學習Web前端的同學提供參考。

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

查看全部

网友关注

生活杭州史密斯旗艦店
發展街邊店是南華集團總經理孫乃樹針對電商高速發展所帶來渠道變革反複思考之後形成的戰略部署，自2014年起，南華集團在體系内開始大力發展自建街邊店，并通過大型街邊店對單一城市市場進行網格化分區域管理，進一步實現對市場的精耕細作。2016年，南... 2022-10-24
生活瘦肚子的最快水果
瘦肚子的最快水果?蘋果、葡萄柚、蕃茄、菠蘿、香蕉、奇異果、檸檬都有瘦肚子的效果這些水果中含有豐富食物纖維、維他命A、幫助消化，下面我們就來說一說關于瘦肚子的最快水果?我們一起去了解并探讨一下這個問題吧!瘦肚子的最快水果蘋果、葡萄柚、蕃茄、菠... 2022-06-07
生活 iphone11還值得購買嗎
618期間很多手機産品都是有了不同程度的折扣，因此，很多消費者都選擇了在這樣一個時機入手自己心儀的産品。和以往不同的是，此次蘋果受疫情和國内暴亂的影響也首次加入到了這次的促銷活動，并且獲得了不錯的銷量成績，筆者在618期間也入手了一款iPh... 2022-11-15
生活沒等到地脈3等來了我們的星球
看完《地球脈動》第一季和第二季後，女兒就一直追問：三什麼時候出來？我總是讓她再等等。看到《我們的星球》（OurPlanet）的官宣消息後，我第一反應就是告訴她，寶貝兒三還沒出來，但是《我們的星球》要來了，還是同一個老爺爺配音！《我們的星球》... 2023-03-30
生活香水灣小孩上學條件
自從我們2021年7月搬到松濤灣定居以來，我經常遇到這樣的情況：當我通過微信公衆号文章、朋友圈、微信視頻号分享松濤灣的生活和風景之後，總有華人朋友問我，松濤灣在哪裡啊？我會告訴他們說，松濤灣在馬拉松的海濱，距離雅典市中心42公裡。他們會追問... 2023-02-14
生活浏覽器主頁被改成hao123怎麼取消
Win10edge浏覽器主頁被hao123劫持怎麼解決？edge浏覽器是Win10系統自帶的一款浏覽器，很多夥伴在使用edge浏覽器時候，發現主頁被hao123給劫持了，隻要一打開edge浏覽器，界面便是hao123的頁面，針對這個問題，該... 2023-01-15
生活沈陽市腦神經内科專家排名
2019年11月30日，太原市中心醫院汾東院區正式開診了！這是一所現代化綜合醫院，這裡環境優美，交通便利。神經内科位于住院部八層東區。科室借鑒歐美國家先進運行模式，為病人提供高質量的醫療服務。科室設備情況科室設有病床30張，依托醫院先進的D... 2023-01-09
生活補血補氣吃什麼東西效果最好
身體裡面的氣血如果不充足，那麼身體肯定不會健康，而且精神狀态也會變得非常差。女性如果缺血那麼皮膚也會變得越來越糟糕，臉色看上去黯淡沒有光澤，對身體健康方面造成的影響也比較明顯。想要補氣補血就應該正确飲食，很多食物都能達到很好的補氣補血作用。... 2023-02-23
生活最令人驚豔的回眸就是袁泉
袁泉的美，是透入骨子裡的。一颦一笑、舉手投足透着一股清冷、知性。尤其是袁泉的眼睛，所有的情緒都凝結在她的雙眸裡。演什麼，就是什麼。這句話隻有用在袁泉身上，才最為恰當。重溫2012年袁泉與周潤發聯袂主演的電影《大上海》，分離多年後的葉知秋與成... 2023-02-26
生活嘉際和大通g50誰好
随着國内汽車市場的蓬勃發展，國内消費者的購車用車理念也在愈發趨于理性與成熟，自主品牌大空間MPV也逐漸擺脫了“低端客貨兩用車”的固有形象，成為許多家庭用戶的選擇。在這樣的大背景下，自主品牌也進一步推出了更多性價比較高的大空間MPV，而且10... 2022-12-30
生活行程碼上帶星号意味着什麼
最近有些朋友發現自己的通行行程卡被标記了*（星号）但自己并沒有去過中高風險地區這是怎麼回事呢？莫慌莫慌，問題不大！跟着小編來了解下行程卡帶星号是什麼意思？行程碼帶星是什麼意思？城市名稱标有*（星号），表示您在過去14天訪問過的城市中目前存在... 2023-02-10
生活和子女的關系證明
和子女的關系證明?孩子的健康成長離不開父母的呵護，但當父母走上離婚的道路，孩子的撫養權會成為焦點，夫妻間的子女争奪戰經常上演孩子到底歸誰？學曆高、條件好就一定能獲得孩子的撫養權嗎？2021年1月1日即将實施的《中華人民共和國民法典》給出了答... 2023-02-09
生活唐詩宋詞天天讀
夜半樂·凍雲黯淡天氣【宋】柳永凍雲黯淡天氣，扁舟一葉，乘興離江渚。渡萬壑千岩，越溪深處。怒濤漸息，樵風乍起，更聞商旅相呼。片帆高舉。泛畫鹢、翩翩過南浦。望中酒旆閃閃，一簇煙村，數行霜樹。殘日下，漁人鳴榔歸去。敗荷零落，衰楊掩映，岸邊兩兩三三... 2023-03-28
生活黃海波複出時間怎麼樣了
文：薄荷糖近日，網上有人報料稱，好久未露面的黃海波和另外兩名演員合作開設了一個表演培訓班，從現場的照片來看，黃海波教學的架勢相當專業，但培訓班的環境卻被吐槽簡陋。我們可以看到，黃海波培訓班的的場地是一個普通的練習室，面積不大，零零散散地擺放... 2023-02-27
生活前置過濾器是管全屋用水嗎
大家有沒有遇到過這種情況，水龍頭打開有沙子、水是黃的，洗澡時花灑還容易堵！其實呀，這是因為你在裝修時少了這一樣東西：前置過濾器，很多朋友隻知道末端淨水器，卻忽略了這個幾百塊的小東西，雖然不起眼但可以說是居家必備。無論家庭裡有沒有裝淨水器的打... 2023-03-20
生活凱迪拉克xt5雙驅豪華最低價
凱迪拉克XT5于2016年上市，一經推出就博得了大量的關注。雖然同為豪華車型，但是凱迪拉克并不像BBA這麼高調，作為上汽通用凱迪拉克旗下的首款SUV，凱迪拉克肩負着銷量的壓力，在凱迪拉克XT4推出以後，XT5更是迎來了大幅的價格下調。據悉，... 2022-12-03
生活山竹裡面黃色的是什麼還能吃嗎
有些人覺得山竹外面黃黃的，害怕吃了有害，想要知道山竹外面黃黃的是什麼？除此之外我們還發現有的山竹比較硬，有的比較軟，那山竹外殼硬的能吃嗎？接下來和小編了解下!山竹非常有營養，味道也很美味，還有清火的功效，因此很多人喜歡吃。但是有時我們買山竹... 2022-12-12
生活梅菜扣肉做法正宗做法
第一次嘗試～～作為一名廣東人～～學會做這道菜心理還是美美哒～By豆豆粉粉粉用料五花肉400克梅幹菜50-80克生抽1大勺白糖半勺油鹽适量蚝油2勺十三香适量姜4片八角1個桂皮2塊做法步驟1、五花肉放入姜片，八角桂皮煮2、煮至可以插入筷子就可以... 2022-11-26
生活你不知道的實用物理知識
寫在前面的話從今天開始，我将把這麼多年我在物理上一些解題方法與經驗寫成一本書，分享給大家。大家有什麼好的方法與技巧也可以跟我探讨，争取把這本【物理方法與技巧】一書寫得更完美一些，以便以後有小朋友翻到的話，能夠學到讓自己驚豔的一些東西。方法技... 2023-01-23
生活國潮館開放時間
明天人民日報新媒體中心精心打造的有間國潮館将在三裡屯通盈中心正式開館！先給大家劇透一波前方高能預警！一大波美圖正在襲來！有間國潮館，給你好看！漫步國漫鏡屋讓你走進動漫的神奇世界超炫國漫手辦牆其中還有全球僅此一件的珍品等你發現在這裡我們為你打... 2023-03-27
生活特别搞笑的朋友圈文案
1.女人是制造人類的工具，但男人是使用工具的人類。2.我熱情有限，你把握好時間。3.人醜嘴不甜長得危險還沒錢。4.每當我找到了成功的鑰匙，就有人把鎖給換了。5.＂大師，我夢見我失戀了，好傷心＂。＂放心吧，夢和現實是反的，你找不到女朋友的＂。... 2022-11-26
生活文藝複興是公元哪一年
中國小康網訊1582年，現代日曆的起源公曆紀年法，由意大利醫生兼哲學家AloysiusLilius對儒略曆加以改革而制成的一種曆法——《格裡高利曆》，由時任羅馬教皇的格列高利十三世予以批準頒行。據史料顯示，公曆紀年以耶稣誕生之年作為紀年的開... 2023-03-20
生活獨立學院好還是民辦院校好
近日，中國傳媒大學南廣學院改名的新聞引起了很多考生和家長的關注，中傳南廣要從獨立學院轉變為民辦高校，那麼，獨立學院和民辦院校有區别嗎？本期，将為大家詳解！獨立學院和民辦院校有什麼區别呢？區别一：含義獨立學院：指實施本科以上學曆教育的普通高等... 2023-03-23
生活聯合國五大常任國秘書長
來源：環球時報新媒體據美國有線電視新聞網（CNN）報道，唐甯街發言人27日表示，預計英國首相蘇納克将不會出席11月在埃及舉行的“聯合國氣候變化大會第27次締約方會議”（英文簡稱COP27），理由是蘇納克要忙于“其他國内緊急事務，包括準備秋季... 2022-12-04
生活我為歌狂2更名為我為歌狂之旋律重啟B...
我為歌狂2更名為《我為歌狂之旋律重啟》B站獨家首播今日（7月16日），我為歌狂官微宣布《我為歌狂2》正式更名《我為歌狂之旋律重啟》，該動畫将于2020年内在B站獨家首播，以下為此次官方公開的相關細節。動畫簡介：南華高中的葉峰、楚天歌、蓋世愛... 2023-03-14
生活四月三星伴月具體時間
四月三星伴月具體時間?四月三星伴月具體時間是4月15日至16日淩晨，這兩天淩晨，月亮将先後與木星、土星、火星會合，首先是木星與下弦月近距離接觸，而在月亮的左下方，還有黃色的土星和紅色的火星相伴，下面我們就來說一說關于四月三星伴月具體時間?我... 2022-06-29
生活标杆管理例子
标杆管理常用于市場營銷、成本管理、人力資源管理、新産品開發、教育等各個領域。通過将自己的産品、服務和經營管理方式同行内或其他的領袖企業進行比較和衡量，并在此基礎上進行一種不斷持續學習的過程。企業為什麼要進行标杆管理呢？有哪些作用？【1】追求... 2023-02-27
生活多肉7個重點
多肉生長速度慢對水分需求小是作為牆體花園裝飾材料的一個很好的選擇跟大家分享一下種在牆上的“多肉畫”一堵多肉牆一幅活着的畫他們追随着時間借季節的手在陽光和溫差下變換色彩和狀态墨西哥滿牆的新玉綴墨西哥國立大學植物學院，整個學院的植物園都以多肉為... 2022-11-03
生活第一美食金針菇炒肉
第一美食金針菇炒肉?，現在小編就來說說關于第一美食金針菇炒肉?下面内容希望能幫助到你，我們來一起看看吧!第一美食金針菇炒肉金針菇清洗幹淨。金針菇洗幹淨去掉根部，挖去中間的籽，切成小段。尖椒的中空部分插入洗淨切尾的金針菇。鍋中放入适量的油，放... 2022-11-01
生活周傑倫點歌環節吳千語
近日，香港藝人林峯與相戀五年的女友吳千語分手的新聞傳出，并在一次采訪中得到了當事人林峯的證實。一段愛情長跑就此落幕。此前吳千語表示想要走出這段長達五年的感情并不容易，就在昨晚，她在與朋友去看周傑倫的香港演唱會時，點唱環節中，更被周傑倫選中，... 2023-03-15

tft每日頭條

> 生活

> css垂直居中的7個方法

css垂直居中的7個方法

相关生活资讯推荐

热门生活资讯推荐

网友关注