行内块或块元素元素水平垂直居中，子元素不设置宽高

方法一： absolute + margin auto

  <div>
      <img src="1.png" alt="">
  </div>
  

        div {
            width: 800px;
            height: 800px;
            border: 1px dotted red;
            position: relative;
         }
         div img{
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
         } 

实现效果

  <div>
       <p>我是块元素</p>
  </div>

  div {
            width: 800px;
            height: 800px;
            border: 1px dotted red;
            position: relative;
         }
         div p{
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
         } 

实现效果

看起来好像是没有水平垂直居中，用了这个方法，P的宽高和父元素DIV是一样的 800*800。是已经达到效果的。建议用此方法，子元素设置宽高

方法二：flex+margin

  <div>
       <p>我是块元素</p>
  </div>

     div {
            width: 800px;
            height: 800px;
            border: 1px dotted red;
            display: flex;
         }
         div p{
            margin: auto;
         }

实现效果

   <div>
      <img src="1.png" alt="">
  </div>

 div {
            width: 800px;
            height: 800px;
            border: 1px dotted red;
            display: flex;
         }
         div img{
            margin: auto;
         }

实现效果

这种方法是非常好用，现在IE已经没有了，不用担心兼容的问题，子元素为行内元素一样可以实现水平垂直居中

方法三：flex

   <div>
      <img src="1.png" alt="">
     <!-- <p>我是块元素</p> -->
  </div>

div{
         display: flex;
         justify-content: center;
         align-items: center;
         width: 800px;
         height: 800px;
         border: 1px dotted red;
       }

实现效果

这种方法，无论子元素是行内元素，行内块，块元素，都可以实现水平垂直居中效果

方法四：table

   <table>
        <tbody>
           <tr>
            <td  class="wp">
               <img src="1.png" alt="">
            </td>
           </tr>
        </tbody>
     </table>

 td{
         width: 800px;
         height: 800px;
         border: 1px dotted red;
         text-align: center;
       }

    因为我这里的是图片，本身是行内块元素，不需要转换为行内块，如果是行元素，需要通过display: inline-block;来转换

实现效果

  <table>
        <tbody>
           <tr>
            <td  class="wp">
              <p>我是块元素</p>
            </td>
           </tr>
        </tbody>
     </table>

  td{
         width: 800px;
         height: 800px;
         border: 1px dotted red;
         text-align: center;
       }

       td img{
         display: inline-block;
       } 

实现效果

对于子元素 为行内元素，一样有效。

方法五：css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

 <div>
      <!-- <img src="1.png" alt=""> -->
      <!-- <p>我是块元素</p> -->
      <span> 我是行内元素</span>
     </div>

  div{
          width: 800px;
          height: 800px;
          border: 1px dotted red;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
       }
       div span{
         display: inline-block;
       }
       
      如果本身是行内块元素，不需要加 display: inline-block;
      块元素及行内元素均有效

实现效果

这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错

第六种：grid 此方法非常强大，可自行了解，以上五种已经够用了。

当子元素设置有高宽，还有3种方法可设置

方法一：absolute+负margin

     <div> 
      <p>我是块元素</p>
     </div>

 div{
          width: 800px;
          height: 800px;
          border: 1px dotted red;
          position: relative;
     }
     div p{
       width:  200px;
       height: 200px;
       background-color: green;
       position: absolute;
       top:50%;
       left: 50%;
       margin-left:-100px;
       margin-top: -100px;
     }

实现效果

此方法 行内元素，及行内块元素，一样可以

方法二：## absolute + transform

 <div> 
      <p>我是块元素</p>
     </div>

 div{
          width: 800px;
          height: 800px;
          border: 1px dotted red;
          position: relative;
     }
     div p{
       width:  200px;
       height: 200px;
       background-color: green;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
     }

实现效果

方法三：## absolute + calc

感谢css3带来了计算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了，代码如下

<div> 
      <p>我是块元素</p>
     </div>

 div{
          width: 800px;
          height: 800px;
          border: 1px dotted red;
          position: relative;
     }
     div p{
       width:  200px;
       height: 200px;
       background-color: green;
       position: absolute;
       top:calc(50% - 100px);
       left:calc(50% - 100px)
     }

实现效果

方法四：vertical-align 此方法子元素只能是行内块或者行内元素

<div>
      <!-- <img src="1.png" alt=""> -->
      <span> 我是行内元素</span>
     </div>

 div{
    width: 800px;
    height: 800px;
    border: 1px dotted  red;
    line-height: 800px;
    text-align: center;
   }

   div span{
    vertical-align: middle;
    background-color: green;
    
   }

实现效果