CSS Flexbox 垂直居中技巧

CSS Flexbox 是一個(gè)強(qiáng)大的布局工具，它可以讓我們輕松地實(shí)現(xiàn)各種復(fù)雜的布局需求，垂直居中是一個(gè)常見(jiàn)的需求，下面我們將介紹幾種實(shí)現(xiàn)垂直居中的技巧。

1、使用 flex-direction: column;

將 flex 容器設(shè)置為 column 方向，然后利用 justify-content: center; 和 align-items: center; 可以實(shí)現(xiàn)垂直居中。

2、使用 flex-direction: row;

將 flex 容器設(shè)置為 row 方向，然后利用 justify-content: center; 和 align-items: center; 也可以實(shí)現(xiàn)垂直居中，但是需要注意的是，如果子元素的高度不一致，這種方法可能會(huì)導(dǎo)致垂直居中的效果不準(zhǔn)確。

3、使用 align-self: center;

對(duì)于單個(gè)子元素，可以使用 align-self: center; 來(lái)實(shí)現(xiàn)垂直居中，這種方法不會(huì)影響到其他子元素的布局。

4、使用 transform: translateY();

可以使用 transform: translateY(); 來(lái)實(shí)現(xiàn)子元素的垂直居中，這種方法需要手動(dòng)計(jì)算子元素的高度，并且如果子元素的高度不一致，這種方法可能會(huì)導(dǎo)致垂直居中的效果不準(zhǔn)確。

幾種方法都可以實(shí)現(xiàn) CSS Flexbox 的垂直居中，具體使用哪種方法取決于你的實(shí)際需求，希望這些方法能對(duì)你有所幫助！