亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

手撕紅黑樹 · 更新于 2020-09-21

絕對定位實現居中布局

1. 前言

居中布局通常分為兩種，一種是固定寬高，另一種是非固定寬高。

固定寬高很好理解，非固定寬高通常都是靠里面的內容來撐起盒子的高度，內容時多時少。

這兩種方式也造就了不一樣的技術實現，我們來看一下。

2. 實例代碼

假如我們有一個寬度占 70%，高度占 25% 的盒子，我們可以這么寫：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默認樣式 */
    * { padding: 0; margin: 0; }

    /* 令html和body全屏顯示, 并有一個灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 先在父元素上設置相對定位 */
    body { position: relative } 

    .center {
      /* 絕對定位 */
      position: absolute;

      /* 上下左右全部為0 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      /* 給定寬高 */
      width: 70%;
      height: 25%;

      /* 令外邊距自動填充 */
      margin: auto;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div class="center"></div>
</body>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

運行結果：

圖片描述
代碼說明：

  • 如果不給定寬高，盒子將會和父元素一樣大，因為絕對定位上下左右都是 0，意為緊貼著父元素的邊。
  • 給了固定寬高，但沒寫 margin 的話盒子會固定在左上角，因為 top 和 left 的優先級更高。
  • 給了 margin: auto; 的話，瀏覽器會自動填充邊距，令其居中。
  • 此種實現方式優點是兼容性很好，幾乎沒用到任何 CSS 的新特性，全部都是經典屬性。

3. 小結

學會了絕對定位來進行居中之后，下一小節我們再來看一下絕對定位怎么和外邊距進行搭配。