前言：如今我们布局大多时候都是用的 flex 布局，但是有时我们也可以使用 margin 小技巧去完成布局。在弹性盒中当我们把 margin 某一个方向上设置为 auto，他的含义是用 margin 吃掉这个方向的剩余空间。
1. 元素垂直和水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style> .box { width: 500px; height: 500px; border: 1px solid; display: flex; } .item { width: 100px; height: 100px; background: blue; margin: auto; } </style> </head> <body> <div class="box"> <div class="item"></div> </div> <script></script> </body> </html>
2. 三个子元素，两个居左一个居右
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" /> <title>document</title> <style> .box { width: 500px; height: 500px; border: 1px solid; display: flex; } .item { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item" style="margin-left: auto"></div> </div> <script></script> </body> </html>
