行内元素水平居中

1.父元素设置：text-align : center;

2.转化成块元素并设置宽度，设置margin : 0 auto;

  <div class="box">
    <!-- <input id="input1" type="text"> -->
    <sapn id="input1">22222</sapn>
    <div id="box1"></div>
  </div>
</body>
<style>
  body{
    /* background-color: green; */
    /* text-align: center; */
  }
  #input1{
    background-color: red;
    display: block;
    width: 100px;
    margin:0 auto;
  }
 </style>