CSS中，div被稱作是頁面布局中最重要的部分之一，掌握好div的集中布局技巧能夠快速幫助我們實現復雜頁面的布局效果。

1
2
3
4

上面的代碼演示了最基本的div布局，通過在容器類中設置display:flex屬性，實現了4個子元素自動集中排列。接下來我們將演示一些實用的div集中布局技巧。

1
2
3
4

上面的代碼中，我們為4個子元素分別添加了不同的類，然后組合使用justify-content和align-items屬性，實現了4個元素在容器中間垂直平均展示的效果。

1
2
3
4

再來看一段代碼，這次我們為2個元素分別對應添加了父元素before和after偽元素，用于在子元素中間添加間距，實現了兩個元素居中展示效果。

總的來說，通過合理的組合使用CSS屬性和類，我們能夠實現各種各樣的div集中布局效果，幫助我們更加靈活的處理頁面布局。