css居中

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--
      标签水平居中:
         行内标签, 行内块级标签:  text-align: center;
         块级标签:  margin: 0px auto;

      标签垂直居中:
          line-height: 400px;
    -->
    <style>
        .test1{
            background-color: red;
            width: 300px;
            height: 400px;
            text-align: center;
            line-height: 400px;
        }

        span{
            background-color: purple;
        }

        .test2{
            background-color: green;
            width: 90px;
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0px auto;
            text-align: center;
        }
    </style>
</head>
<body>
   <div class="test1">
       <!--行内标签-->
       <span></span>
       <!--行内-块级标签-->
       <!--<button>百度一下</button>-->
       <!--块级标签-->
       <!--<div class="test2">efwf</div>-->
   </div>

</body></html>