able + margin 實現水平方向居中, table-cell + vertical-algin 實現垂直居中

者：薔薇Nina

原文：https://www.cnblogs.com/wcwnina/p/11297630.html

在CSS里，標簽位置居中一直是困擾Web前端的難題。在本文中，我對這類問題進行了探究和給出了幾點建議，供讀者參考。

1 行內標簽

1.1 水平居中

在父級標簽中使用 text-align: center。

效果：

1.2 垂直居中

如果是單行，則為該標簽設置行高（line-height）且與其父級標簽 height 相等即可。

效果：

如果是多行，稍微有點麻煩，需要在該標簽設置 display: table-cell 和 vertical-align: middle，在其父級標簽設置 display: table。

效果：

2 塊標簽

2.1 水平居中

方法一：在父級標簽中使用 flex 彈性盒子。

效果：

方法二：在該標簽中使用 margin 屬性。

效果：

2.2 垂直居中

在父級標簽中使用 flex 彈性盒子。

效果：

總結：對于行內標簽居中，優先考慮文本對齊（text-align）和顯示單元格（table-cell）；對于塊標簽居中，優先考慮顯示彈性盒子（flex）。