css實現(xiàn)元素居中的6種方法

發(fā)布時間：2023-09-07 11:34:01 作者：富朝陽

我要評論

相信大家在面試的時候也會經(jīng)常碰到css實現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評論區(qū)交流

前言

相信大家在面試的時候也會經(jīng)常碰到css實現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評論區(qū)交流。

需求：

給定兩個元素，這兩個元素是父子級關系

并且兩個元素的大小都是不確定的，那么這時候如何讓子級在父級中上下左右都居中？（暫且設定父級比子級要大一些）。

實現(xiàn)方案：

1.最簡單的方法

父元素設置display:flex,子元素 margin: auto，代碼如下：

<style>
    .parent {
      width: 300px;
      height: 200px;
      background: rebeccapurple;
      display: flex;
    }
    .child {
      width: 50px;
      height: 50px;
      background: red;
      margin: auto;
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

2.利用定位

思路

父級相對定位，子級絕對定位而四個定位屬性的值都設置了0；那么這時候如果子級沒有設置寬高，則會被拉開到和父級一樣寬高。而現(xiàn)在設置了子級的寬高，所以寬高會按照我們的設置來顯示；但是實際上子級的虛擬占位已經(jīng)撐滿了整個父級，這時候再給它一個margin：auto它就可以上下左右都居中了

<style>
    .parent {
      width: 300px;
      height: 200px;
      background: pink;
      position: relative;
    }
    .child {
      width: 50px;
      height: 50px;
      background: gold;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

3.定位配合css3位移

思路

父級相對定位，子級絕對定位，而top，left這兩個屬性的如果給百分比；那么這個百分比則是相對于父級的寬高來進行計算的；如果只給定這兩個值，則子級的右上角會和父級的中心點對齊，得到下圖：這時候則需要進一步操作：css3中的位移屬性，則是根據(jù)自身來計算百分比的；所以只需要利用這個屬性把自身再往左上角各移動50%就可以讓子級在父級中上下左右都居中了

<style>
    .parent {
      width: 300px;
      height: 200px;
      background: rgb(203, 192, 255);
      position: relative;
    }
    .child {
      width: 50px;
      height: 50px;
      background: rgb(221, 201, 73);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

4.彈性盒模型

css3的功勞，沒啥技巧，掌握了彈性盒模型就能掌握這個方法，簡單粗暴。

<style>
    .parent {
      width: 300px;
      height: 200px;
      background: rgb(203, 192, 255);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .child {
      width: 50px;
      height: 50px;
      background: rgb(62, 57, 24);
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

5.網(wǎng)格布局Grid

這個方法和彈性盒模型一樣，簡單粗暴，沒啥可說的。

<style>
    .parent {
      width: 300px;
      height: 200px;
      background:green;
      display: grid;
      justify-content: center;
      align-items: center;
    }
    .child {
      width: 50px;
      height: 50px;
      background: rebeccapurple;
    }
  </style>
  <div class="parent">
    <div class="child"></div>
  </div>

6.tabel-cell實現(xiàn)垂直居中

將父容器的display指定為table，這樣瀏覽器便會把parent當作一個table對待，然后向table中添加元素，元素具有的效果就會和直接使用td標簽一樣。再只要添加一個水平居中屬性就好了。

<style>
    .parent {
      width: 300px;
      height: 200px;
      background: rgb(120, 202, 13);
      display: table-cell;
      vertical-align: middle; // 垂直居中
    }
    .child {
      width: 50px;
      height: 50px;
      background: rgb(110, 83, 231);
      margin: auto; // 水平居中
    }
</style>
<div class="parent">
  <div class="child"></div>
</div>