點擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
上篇已經提到過，前端布局是整個web開發非常重要的一環，也是最基礎和最前面的一個環節。有關居中布局又分垂直和水平方向。接着上一篇，今天搞一些水平居中的CSS寫法。
一、inline-block和text-align很簡單，就是将子元素設置成行内塊級元素，這樣就成變來處理行内塊級元素水平居中的問題。
将子元素使用inline-block變成行内塊級元素，對父框設置text-align就能完整。如下代碼所示：
看起來是下面這樣的：
效果起來就是這樣的：
這個方法的好處的是隻要我們設置child就行，ie8之上都支持。
應該注意的地方是不支持ie低版（可以忽略）
三、absolute和transform和上一篇垂直居中是一樣的，父元素先設置成相對定位，然後處理子元素在絕對定位下的left值。原理是一樣的。這裡直接看一下我寫的DEMO的代碼如下所示：
這個方法的好處就是：居中元素不會對其他的産生影響。
應該注意的地方就是：css3屬性的兼容問題。
效果看起來和上面一緻：
四、flex和margin
通過将父元素設置成flex後，将所有子元素轉換成flex item，在将子元素設置margin屬性達到居中。
這個方法不好的地方同樣是低版浏覽器兼容性問題，需要注意一下。
效果展示一下:
接下來說一下第五種方法。
五、flex和justify-content這個方法和上面第四個方法極其相似，隻是這兩個屬性都是設置在父元素上，代碼如下：
通過CSS3中的布局利器flex中的justify-content屬性來達到水平居中。
比第四個方法相比，好處是隻要設置父元素屬性就行。缺點同樣是低版本兼容性問題。
最後總結一下：
搞定水平居中一共寫了五種方法，各有異同，理解一下，很容易記住，學會，常用、常用。
,
左置頂垂直居中怎麼弄
更新时间：2025-12-22 23:07:42
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations,
you may see comments from our Community Managers.
Sign up to post
Show More Comments
相关案例
推荐阅读
刀劍亂舞五周年福利
《刀劍亂舞-ONLINE-》中文版周年慶今日來襲!精彩活動全揭曉——戰力擴充計劃龜甲貞宗搜索、四位脅差踏上修行之路、新刀劍男士小龍景光重磅登場!還有《刀劍亂舞-ONLINE-》周年慶&新春祭專題頁面上線，在該頁面上參與審神者集結活動，還有機...
2025-12-22
陳睿b站幹了什麼
B站究竟是什麼？這是個困擾所有投資人的問題，涉及到B站對标模型，但B站并沒有完全對标物。6月26日，B站迎來了第十一個年頭。在線上直播活動中，B站董事長兼CEO陳睿表達了自己的看法，B站使命是，為用戶構建社區，為創作者搭建舞台，出品最好的中...
2025-12-22
祖瑪珑JO MALONE香水
導讀雅詩蘭黛旗下的香水品牌祖瑪珑（JOMALONE）即将在2016年4月推出春季新香：頂級茶香珍茗系列。這個系列一共有六款味道，分别是白毫銀針、大吉嶺、玉露茶、烏龍、醇紅茶、金芽茶。這不是第一款茶味的香水，也不是化妝品和茶的第一次碰撞。雅詩...
2025-12-22
學二胡要多久才能入門
學二胡要多久才能入門?一、琴筒是二胡的共鳴箱，琴杆是支撐琴弦、接指操作的重要支柱，下面我們就來說一說關于學二胡要多久才能入門?我們一起去了解并探讨一下這個問題吧!學二胡要多久才能入門一、琴筒是二胡的共鳴箱，琴杆是支撐琴弦、接指操作的重要支柱...
2025-12-22
每日成語短語
【口若懸河】釋義：若：好象；懸河：瀑布、傾瀉的急流。嘴像懸河，說起話來滔滔不絕，像河水傾瀉一般。形容人能言善辯，話多得說不完。故事梗概：晉朝時，有一位大學問家，名叫郭象，字子玄。他在年輕的時候已經是一個才高八鬥的人，尤其是對于日常生活中所接...
2025-12-22
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
