你是不是也經(jīng)常在寫網(wǎng)頁時，遇到一個讓人頭大的問題：怎么讓一個div居中？
別急，我來幫你拆解——不是只有“margin: 0 auto”這一種答案。作為一個寫了5年自媒體、做過30+個公眾號排版的作者，我見過太多人只記住了“居中”的公式，卻忽略了實際場景。
Q1：水平居中，最簡單的方法是什么？
如果你的div是塊級元素（比如寬度固定），用這個就穩(wěn)了：
這是最基礎的“外邊距自動分配法”，適用于固定寬度的盒子。但！如果div寬度是百分比或者自適應呢？這時候它就不靈了。
Q2：那怎么讓自適應寬度的div也居中？
試試Flexbox，現(xiàn)代布局神器！
這個方法超實用，尤其適合響應式設計。我在小紅書發(fā)過一篇“手機端適配指南”，就是靠這個技巧讓內(nèi)容在iPhone和安卓上都完美居中，讀者留言說：“終于不用再調(diào)試不同屏幕了！”
Q3：垂直居中怎么辦？真的只能靠padding嗎？
不！現(xiàn)在主流方案是Flex + 垂直對齊：
是不是清爽多了？我之前幫朋友改了一個電商詳情頁，原本用的是table+verticalalign，結(jié)果在Chrome里崩了。換成Flex后，不僅居中精準，還省了20行冗余代碼。
Q4：老項目不能用Flex？還能怎么辦？
別慌，CSS Grid也可以搞定：
雖然Grid稍新，但在移動端支持度已經(jīng)很高。我用它給一個教育類賬號做了課程卡片布局，視覺統(tǒng)一又干凈，粉絲都說“看起來高級了不少”。
總結(jié)一下： ?? 固定寬 → margin: 0 auto ?? 自適應 → Flexbox（推薦） ?? 老項目/兼容性要求高 → Grid 或 table（慎用）
居中不是難題，關鍵是看場景。下次你寫代碼前，先問自己一句：“我要居中的是什么？”——答案就在眼前。
收藏這篇，下次寫CSS再也不怕“div居中”三個字啦～?
