视频：https://www.bilibili.com/video/BV1pE411q7FU?p=151
    30的方法是让块级元素水平居中，
    行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。
    例子1

    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.     div {
    12.       width: 500px;
    13.       height: 200px;
    14.       background-color: blue;
    15.       margin: 0 auto;
    16.     }
    18.     span {
    19.       margin: 0 auto;
    20.     }
    21.   </style>
    22. </head>
    24. <body>
    25.   <div>
    26.     <span>nihao</span>
    27.   </div>
    28. </body>
    30. </html>

    image.png
    可以看出span{margin：0 auto}并不能使它在盒子里水平居中

    例子2：

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    div {
      width: 500px;
      height: 200px;
      background-color: blue;
      margin: 0 auto;
      text-align: center;
    }
  </style>
</head>

<body>
  <div>
    <span>nihao</span>
  </div>
</body>

</html>

    在父元素里添加了text-align: center;后实现了span在盒子水平居中。
    image.png