CSS零碎知識點（2）——居中DIV盒子

二木成林發表於2020-11-14
CSS

有如下一個HTML，但裡面的DIV盒子沒有居中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

 

為該DIV盒子設定樣式如下：

/* 居中0 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中1 */

即居中

完整程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #app {
        width: 500px;
        height: 400px;
        background: #00FFFF;
        border: 1px solid red;
        /* 居中0 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /* 居中1 */
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

 

相關文章