div中的div居中
css垂直居中：5种⽅法
<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    /*⽅法四*/
    /* This parent can be any width and height */
    .block {
      height: 300px;
      text-align: center;
      background: #FFE1CC;
      border: 2px solid #91C001;
    }
    /* The ghost, nudged to maintain perfect centering */
    .block:before {
      height: 100%;
      content: '';
      display: inline-block;
      vertical-align: middle;
      margin-right: -0.25em; /* Adjusts for spacing */
    }
    /* The element to be centered, can also be of any width and height */
    .centered {
      width: 50%;
      display: inline-block;
      vertical-align: middle;
      background: #A3E6F1;
    }
  </style>
  <body>
    <!--
      垂直居中：⽅法⼀
      使⽤：display：table；vertical-align：middle；
    -->
    <div >
      <div >项⽬质监机构</div>
      <div >
        <a ></a>
      </div>
    </div>
    <!--
      垂直居中：⽅法⼆
      使⽤：position：absolute；写法⼀
    -->
    <div >
      <div ></div>
    </div>
    <!--
      垂直居中：⽅法⼆
      使⽤：position：absolute；写法⼆
    -->
    <div >
      <div ></div>
    </div>
    <!--
      垂直居中：⽅法三
      使⽤：display：flex；
          justify-content: center;⽔平居中
        　align-items: center; 垂直居中
      IE9，IE8下不⽀持；
    -->
    <div >
      <div ></div>
    </div>
    <!--
      垂直居中：⽅法四
      使⽤：display：inline-block；
    -->
    <div class="block">
      <div class="centered">
        <h1>haorooms案例题⽬</h1>
        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
      </div>
    </div>
  </body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。