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

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

我要評(píng)論

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

前言

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

需求：

給定兩個(gè)元素，這兩個(gè)元素是父子級(jí)關(guān)系

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

實(shí)現(xiàn)方案：

1.最簡(jiǎn)單的方法

父元素設(shè)置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.利用定位

思路

父級(jí)相對(duì)定位，子級(jí)絕對(duì)定位而四個(gè)定位屬性的值都設(shè)置了0；那么這時(shí)候如果子級(jí)沒(méi)有設(shè)置寬高，則會(huì)被拉開(kāi)到和父級(jí)一樣寬高。而現(xiàn)在設(shè)置了子級(jí)的寬高，所以寬高會(huì)按照我們的設(shè)置來(lái)顯示；但是實(shí)際上子級(jí)的虛擬占位已經(jīng)撐滿了整個(gè)父級(jí)，這時(shí)候再給它一個(gè)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位移

思路

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

<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的功勞，沒(méi)啥技巧，掌握了彈性盒模型就能掌握這個(gè)方法，簡(jiǎn)單粗暴。

<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

這個(gè)方法和彈性盒模型一樣，簡(jiǎn)單粗暴，沒(méi)啥可說(shuō)的。

<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實(shí)現(xiàn)垂直居中

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

<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>