div的水平垂直居中

• div的水平垂直居中

  • 定位+margin：auto（子元素未知宽高不能实现水平垂直居中）

    <style>
        .out {
          width: 200px;
          height: 200px;
          background-color: yellow;
          position: relative;
        }
    
        .in {
          width: 100px;
          height: 100px;
          background-color: green;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
        }
      </style>
    <div class="out">
        <div class="in"></div>
    </div>
    

  • table（子元素未知宽高可实现水平垂直居中）

     .out {
          display: table;
          width: 100%;
          height: 400px;
          background: #666;
        }
    
        .in {
          display: table-cell;
          vertical-align: middle;
          text-align: center;
          background: red;
        }
    <div class="out">
        <div class="in"></div>
    </div>
    

  • 定位+translate（子元素未知宽高可实现水平垂直居中）

      <style>
        .out {
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
          }
      
          .in {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        </style>
      <div class="out">
          <div class="in"></div>
      </div>
    

  • flex（子元素未知宽高可实现水平垂直居中）

    <style>
    	 .out {
          width: 200px;
          height: 200px;
          background-color: yellow;
          display: flex;
          justify-content: center;
          align-items: center;
        }
    
        .in {
          width: 100px;
          height: 100px;
          background-color: green;
        }
    <style>
    <div class="out">
        <div class="in"></div>
    </div>