首页 > 代码库 > css垂直居中:5种方法

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 style="width: 100%; height: 50px; display: table;border: 1px solid #333; background: #E0EAF4;">
      <div style="text-align: left; line-height: 50px;">项目质监机构</div>
      <div style="display: table-cell; vertical-align: middle;">
        <a style="border: 1px solid #333; height:2px; width:10px;"></a>
      </div>
    </div>

    <!--
      垂直居中:方法二
      使用:position:absolute;写法一
    -->
    <div style="position: relative; height: 150px; background-color: #C5C5FD;">
      <div style="position:absolute; background:#6F66FB; width: 100px; height: 100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0;"></div>
    </div>

    <!--
      垂直居中:方法二
      使用:position:absolute;写法二
    -->
    <div style="position: relative; height:140px; background: #333; border: 5px dashed #658945;">
      <div style="position: absolute; height: 50px; width: 50px; top: 50%; margin-top: -25px; background: #84F754; left: 50%; margin-left: -25px;"></div>
    </div>

    <!--
      垂直居中:方法三
      使用:display:flex;
           justify-content: center;水平居中
         align-items: center; 垂直居中

      IE9,IE8下不支持;
    -->
    <div style="display: flex; display: -webkit-flex; height: 200px; background: #FFFFCC; border: 3px solid #C0014E; align-items: center; justify-content: center;">
      <div style="height:70px; width:70px; background: #29F9F9;"></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>

css垂直居中:5种方法