外边距让块级盒子水平居中，必须满足两个条件：

    1. 盒子必须指定了宽度（width）。
    2. 盒子左右的外边距都设置为auto。

    常见的写法，一下三中都可以：

    • margin-left:auto; margin-right:auto;
    • margin:auto;
    • margin: 0 auto;(最常用）

    例子：

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Document</title>
    10.   <style>
    11.     .nav {
    12.       width: 900px;
    13.       height: 300px;
    14.       background-color: blue;
    15.       margin: 0 auto;
    16.     }
    17.   </style>
    18. </head>
    20. <body>
    21.   <div class="nav"></div>
    22. </body>
    24. </html>

    效果图
    image.png