css居中的方法?這幾天有小夥伴在我的web前端交流群裡說前幾天面試一家公司，被問到垂直居中的方法，隻答出了margin、table-cell、flex三種，然後就不知道了，然後問我除此之外還有哪些？，于是我整理了一下居中的方案做個記錄，希望對大家也有幫助，我來為大家科普一下關于css居中的方法?以下内容希望對你有幫助!

css居中的方法

這幾天有小夥伴在我的web前端交流群裡說前幾天面試一家公司，被問到垂直居中的方法，隻答出了margin、table-cell、flex三種，然後就不知道了，然後問我除此之外還有哪些？，于是我整理了一下居中的方案做個記錄，希望對大家也有幫助。

如果哪裡寫的不對，歡迎指正，非常感謝。

塊級元素居中 html代碼部分

<div class="parent"> <div class="child">child</div> </div>

行内元素居中 html代碼部分

<div class="parent"> <span class="child">child</span> </div>

水平居中

01 行内元素 text-align: center;

.parent { text-align: center; }

02 塊級元素 margin: auto;

低版本浏覽器還需要設置 text-align: center;

.parent { text-align: center; } .child { width: 100px; margin: auto; border: 1px solid blue; }

由于本文主要想記錄的是垂直居中的方案，這裡水平垂直的其他方案就不做過多記錄了。

垂直居中

01 行内元素（單行文字垂直居中）：設置 line-height = height

.parent { height: 200px; line-height: 200px; border: 1px solid red; }

02 塊級元素：絕對定位（需要提前知道尺寸）

• 優點：兼容性不錯
• 缺點：需要提前知道尺寸，margin-top: -(高度的一半); margin-left: -(寬度的一半);

.parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; background: blue; position: absolute; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; }

03 塊級元素：絕對定位 transform

• 優點：不需要提前知道尺寸
• 缺點：兼容性不好

.parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: blue; }

04 塊級元素：絕對定位 margin: auto;

• 優點：不需要提前知道尺寸，兼容性好
• 缺點：這個方法是我最喜歡用的一個，要說缺點的話，我目前還不知道。

此方法出自張鑫旭老師的博客 小tip: margin:auto實現絕對定位元素的水平垂直居中

.parent { position: relative; height: 200px; } .child { width: 80px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: blue; }

05 塊級元素：padding

• 缺點：如果高度固定，需要提前計算尺寸（隻在某些特定情況适用）。

.parent { padding: 5% 0; } .child { padding: 10% 0; background: blue; }

06 塊級元素：display: table-cell

.parent { width: 600px; height: 200px; border: 1px solid red; display: table; } .child { display: table-cell; vertical-align: middle; }

或：

這個方案是在知乎看到的，原文說是淘寶團隊的方案：

用 CSS 實現元素垂直居中，有哪些好的方案？- Gino的回答 - 知乎

張鑫旭老師的博客也有提到過：

我所知道的幾種display:table-cell的應用

.parent { height: 300px; border: 1px solid red; display: table-cell; vertical-align: middle; /* *display: block; *font-size: (heightX0.873); *font-family: arial; */ }

同樣适用于多行文字的垂直居中處理

HTML代碼：

<div class="parent"> <span class="child">child child child child child child child child child child child child child child child child child child child childchild child child </span> </div>

CSS代碼：

.parent { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; } .child { display: inline-block; vertical-align: middle; background: blue; }

07 塊級元素：display: flex

• 缺點：兼容性不好

.parent { width: 600px; height: 200px; border: 1px solid red; display: flex; align-items: center; justify-content: center; /*水平居中*/ } .child { background: blue; }

08 塊級元素：僞元素

這個方案是先從這位博主的文章中看到：

CSS：使用僞元素做水平垂直居中的微深入研究

然後發現張鑫旭老師的文章中也有提到：

:after僞類 content内容生成經典應用舉例

.parent { width: 300px; height: 300px; border: 1px solid red; text-align: center; } .child { background: blue; width: 100px; height: 40px; display: inline-block; vertical-align: middle; } .parent::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }

09 塊級元素：calc()

也是個不錯的方法。

• 缺點：兼容性較差，需要計算。

.parent { width: 300px; height: 300px; border: 1px solid red; position: relative; } .child { width: 100px; height: 100px; background: blue; padding: -webkit-calc((100% - 100px) / 2); padding: -moz-calc((100% - 100px) / 2); padding: -ms-calc((100% - 100px) / 2); padding: calc((100% - 100px) / 2); background-clip: content-box; }

10 塊級元素：inline-block

HTML代碼：

<div class="parent"> <div class="child">child</div> <div class="brother">brother</div> </div>

CSS代碼：

.parent { width: 400px; height: 400px; border: 1px solid red; position: relative; } .child, .brother { display: inline-block; vertical-align: middle; } .child { background: blue; font-size: 12px; } .brother { height: 400px; font-size: 0; }

其他

當然，還有一種方法，就是使用table布局:

<table> <tr> <td align="center" valign="middle">content</td> </tr> </table>

因為html還要加table等标簽，冗餘有點多，而且結構也改變了。

好啦，分享到這裡也就結束了，下次見。

關注我的頭條号，分享更多的技術學習文章，我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最适合2019年學習的web前端學習幹貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條号并在後台私信我：前端，即可免費獲取。

,

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

查看全部