<style>
    /* 固定宽高 */
    /* css对于水平居中对他的父元素应用text-aligin: center, 垂直居中块级元素元素就相对于自身元素了margin:auto */
    /* 第一种基于定位的垂直居中 */
    *{
        margin: 0px;
        padding: 0px;
       
    }
    body{
      background-color: darkkhaki;
      font-size: 14px;
    }
    /* 核心代码块 */
     main{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -9em;
        margin-top: -3px;
        width: 18em;
        height: 6em;
        background-color: #000;
        color: rgb(134, 125, 125);
     }
     /* 文字居中 */
     main h1, main p{
         text-align: center;
     }
    </style>

 <!-- 第一种基于定位的垂直居中 -->
   <main>
       <h1>我居中了没有</h1>
       <p>谢天谢天我居中了</p>
   </main>