如何将css居中”一网打尽“ ？

用心去回报
335 阅读5分钟

“实现居中”也是一道必考题。我们先来看一段实例代码，如下图

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中元素定宽高</title>
  </head>
  <style>
    .wp {
      border: 1px solid red;
      width: 300px;
      height: 300px;
    }
    .box {
      background-color: greenyellow;
    }
    .fixed-size {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
  <body>
    <div class="wp">
      <div class="box fixed-size">text</div>
    </div>
  </body>
</html>

上面的代码被浏览器渲染后会得到如下图的内容。那如何将其中没有居中的部分居中显示呢？

image.png 在很多情况下，我们都需要实现居中显示，但针对不同情况，使用的方法也有所不同，下面我们分别从居中元素定宽高、居中元素不定宽高两个层面来介绍实现居中显示的不同方法。

居中元素定宽高

在居中元素定宽高的情况下，有3种实现居中显示的方法。

1、absolute + 负margin

这是一种很容易想到的方法，代码如下

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中元素定宽高</title>
  </head>
  <style>
    .wp {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
    }
    .box {
      position: absolute;
      background-color: greenyellow;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
    .fixed-size {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
  <body>
    <div class="wp">
      <div class="box fixed-size">text</div>
    </div>
  </body>
</html>

绝对定位的百分比是基于父元素的宽高计算出来的，要想使元素偏移则可进行如下设置。

 top: 50%;
 left: 50%;

元素偏移后，再修正元素自身宽高的一半，即可实现居中显示，如下。这其实是一个简单的数学几何运算。

 margin-left: -50px;
 margin-top: -50px;

2、absolute + margin auto

这个方法将各个方向的距离都设置为0，此时将margin配置为auto，就可以实现居中显示了。使用该方法的代码如下。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中元素定宽高</title>
  </head>
  <style>
    .wp {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
    }
    .box {
      position: absolute;
      background-color: greenyellow;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    .fixed-size {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
  <body>
    <div class="wp">
      <div class="box fixed-size">text</div>
    </div>
  </body>
</html>

3、absolut + calc

这种方法和第一种类似，代码如下所示，这里就不再展开讲解。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中元素定宽高</title>
  </head>
  <style>
    .wp {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      position: relative;
    }
    .box {
      background-color: greenyellow;
      position: absolute;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
    }
    .fixed-size {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
    }
  </style>
  <body>
    <div class="wp">
      <div class="box fixed-size">text</div>
    </div>
  </body>
</html>

居中元素不定宽高

我们首先给出一个居中元素不定宽高的示例，具体如下。

<style>
.wp {
    border: 1px solid red;
    width：300px;
    beight：30Upx;
  }
.box {
    background:green;
  }
</style>
<body>
    <div class="wp">
        <div class="box ">text</div>
    </div>
</body>

对于居中元素不定宽高的情况，依然有很多方法可以实现居中，下面分别介绍一下。

1. absolute + transform

宽高不定时，可以利用CSS3新增的 transfonm， transform的translate属性也可以用来设置百分宽高不定时， 比，这个百分比是基于自身的宽和高计算出来的，因此可以将translate设置为-50%，代码如下。

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

2. line-height

把box设置为行内元素，可以通过text-align实现水平居中，同时通过vertical-align实现垂直方向上的居中，代码如下。

.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
  }
.box {
    width: 100px;
    height: 100px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; 
  }

这个方法充分利用了行内/块级元素的特点。

3. table

其实，历史上的table经常被用来做页面布局，这么做的缺点是会增加很多冗余代码，并且性能也不友好。不过处理居中问题，它可是能手。把布局当作一个表格来做的代码如下。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>居中元素不定宽度</title>
    <style>
      .wp {
         text-align: center;
      }
      .box {
         display: inline-block;
      }
    </style>
  </head>
  <body>
    <table>
      <tabley>
        <tr>
          <td class="wp">
            <div class="box">test</div>
          </td>
        </tr>
      </tabley>
    </table>
  </body>
</html>

4. css-table

如何使用tabie布局的特性效果，但是不采用table元素呢?答案是使用css-table，代码如下。

.wp {
    display: table-cell;
    text-align: center;
    veztical-align: middle；
  }
.box {
    display: nline-block；
  }

以上代码使用了display：tablc-cell，和table布局相比，冗余代码减少了很多。

5. flex

flex是非常现代的布局方案，可以通过几行代码优雅地实现居中，代码如下。

.wp {
    display:flex;
    juetify-content:center;
    al1gn-items: center;
  }

6. grid

grid布局非常超前，虽然兼容性不好，但是能力超强。使用它实现居中的代码如下。

.wp {
    display:grid;
  }
.box {
     al1gn-self： center;
     justity-self：center;
  }

居中效果图如下图：

image.png

在学习了以上几种布局方法后，我们来简单总结一下。

  • pC端有兼容性要求，宽高固定，推荐使用“absolute+负 margin”的方法实现居中。
  • PC端有兼容性要求，宽高不固定，推荐使用css-table实现居中。
  • PC端无兼容性要求，推荐使用flex实现居中。
  • 移动端推荐使用flex实现居中。 总结 与HTML和CSS有关的问题在面试中考查得较少，但是如果答得不好，对于面试结果来说将是致命的。同时，在工作中，如果这方面存在知识短板，则往往会造成不必要的效率消耗。为了得到更好的面试结果，更为了提高自己的技能，我们应该正视前端领域中这两个离不开的“面子工程”。
avatar
文章
阅读
粉丝