flex布局怎么讓盒子垂直水平居中？

我們這里分為兩種形式，一種是定元素寬高的情況下，另一種是不定元素寬高的情況下。

定元素寬高的情況下

a.絕對定位 + 負margin

利用絕對定位absolute和margin完成元素居中，具體例子如下：

給父元素添加相對定位，子元素添加絕對定位，利用margin負子元素寬高的一半，實現元素的居中，這種方法不常用，

優點：好理解，兼容性好

缺點：必需給定子元素的寬高

b.絕對定位+margin:auto

利用absolute絕對定位和margin:auto自動居中方法完成元素的居中，例子如下：

與上例子一樣給父元素加相對定位，子元素添加絕對定位，在設置元素的左、右、上、下位置為零，再利用自動居中對齊的方法margin:auto,完成元素的垂直水平居中，這種方法常用

優點：簡單易懂，兼容性好

缺點：代碼量大，占內存

c.table-cell

利用css的table屬性，完成元素的垂直居中，margin完成元素的水平居中，例子如下

設置父元素的元素類型為table-cell類型，設置表格的垂直對齊方式為居中，再給子元素添加margin:0 auto 完成元素的垂直水平居中，這種方法不常用，

優點：兼容性好

缺點：出來的太早，現在都不流行用了

d.translate

利用2d位移來完成元素的居中，例子如下：

只需操作子元素，給子元素添加transform屬性，利用2d位移translate,分別向左向右移動父元素寬高度減自身寬高度的一半，完成元素的垂直水平對齊，這種方法不常用，

優點：代碼簡單

缺點：我們必須給定子元素的寬和高，否則無法完成元素居中

不定元素寬高的情況下

line-heght

給元素設置line-heght,也就是行高，完成元素的居中，具體例子如下：

我們給子元素設置行高，完成元素的垂直居中，再然后利用文本水平對齊方式text-align方法，完成水平居中，這中方法是最簡單的，也是我們經常用的

優點：寫起來簡單，兼容性好

缺點：只適合單行文本的居中，多行文本不支持

b.絕對定位加translate

之前我們說過一個利用translate完成元素垂直水平的，這里就是在那種方法上的進一步改進，也就是可以，不用設置寬高，也能實現元素的垂直水平居中，用translate加絕對定位完成元素的居中，例子如下：

在這里，還有不同就是，我們translate里面可以直接用百分比完成位移，從而實現元素的垂直水平居中，這種方法常用（但是我不常用）

優點：代碼簡單，兼容性好

缺點：無

c.flex

flex形成彈性盒，我們利用彈性盒可以做很多事情，其中最主要的還是布局，當然這里我們就不詳細說了，我們來談談如何使一個元素垂直水平居中，例子如下：

我們讓父元素形成彈性盒子，再然后設置主軸對齊方式為居中對齊，側軸對齊方式為居中對齊從而完成元素的垂直水平居中，這種方法經常用，

優點：代碼簡單易懂

缺點：PC端兼容性不好

d.flex+margin:auto

這種方法與上面那種不同的是，這里沒用到彈性盒子里面的屬性，而是用margin直接完成元素的居中對齊，例子如下：

讓父元素形成彈性盒子，再然后給子元素添加margin:auto,完成元素的垂直水平居中，這種方法也常用，