代码集 CSS 实现水平垂直居中的 10 种方法

实现上图中的效果，看似很简单，其实暗藏玄机。本文总结了CSS中实现水平居中和垂直居中的方法，大致如下。本文将对它们进行一一介绍。我已将本文整理到github仓库，欢迎大家star

仅适用于居中元素的固定宽度和高度

• absolute + 负边距
• absolute + 自动边距
• absolute + 计算 居中元素有未定义宽度 高
  • 绝对 + 变换
  • lineheight
  • 类型模式
  • 表格
  • css-d♸❙css-d♸

  绝对 + 负边距

  为了达到上面的效果，我们先做好准备工作。假设 HTML 代码如下。总共有两个元素，父元素和子元素

  <div class="wp">
      <div class="box size">123123</div>
  </div>
  复制代码

  wp是父元素的类名，box是子元素的类名，因为固定宽度和可变宽度有区别，size是用的来指示指定的宽度。下面是所有效果使用的通用代码，主要是设置颜色和宽高

  注：这个通用代码后面不再重复，只是提供相应的提示

  /* 公共代码 */
  .wp {
      border: 1px solid red;
      width: 300px;
      height: 300px;
  }
  
  .box {
      background: green;    
  }
  
  .box.size{
      width: 100px;
      height: 100px;
  }
  /* 公共代码 */
  复制代码

  绝对位置百分比是相对于父元素的宽度和高度。通过该功能，子元素可以显示在中央，但绝对位置以子元素的左上角为准。想要的效果是显示子元素的中心

  可以使用外部负边缘值来解决这个问题，负边缘可以将元素定位在相反的方向。通过将子元素的边框指定为子元素宽度一半的负值，可以使子元素居中。 css代码如下

  /* 此处引用上面的公共代码 */
  /* 此处引用上面的公共代码 */
  
  /* 定位代码 */
  .wp {
      position: relative;
  }
  .box {
      position: absolute;;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
  }
  复制代码

  我一般都是用这个方法，这个方法比较容易理解，兼容性也很好。缺点是需要知道子元素的宽度和高度

  点击查看完整DEMO

  absolute + margin auto

  此方法还需要居中元素的宽度和高度。它必须被修复。 HTML代码如下

  <div class="wp">
      <div class="box size">123123</div>
  </div>
  复制代码

  因此将各个方向的距离设置为0，然后将边框设置为auto就可以使各个方向居中

  /* 此处引用上面的公共代码 */
  /* 此处引用上面的公共代码 */
  
  /* 定位代码 */
  .wp {
      position: relative;
  }
  .box {
      position: absolute;;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  复制代码

  这个方法也非常兼容。 ，缺点是需要知道子元素的宽度和高度

  点击查看完整DEMO

  absolute + calc

  这种方法还需要固定居中元素的宽度和高度，所以加上尺寸类到盒子。 HTML代码如下

  <div class="wp">
      <div class="box size">123123</div>
  </div>
  复制代码

  感谢CSS3带来了计算属性。由于顶部百分比基于元素的左上角，因此只需减去宽度的一半即可。代码如下

  /* 此处引用上面的公共代码 */
  /* 此处引用上面的公共代码 */
  
  /* 定位代码 */
  .wp {
      position: relative;
  }
  .box {
      position: absolute;;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
  }
  复制代码

  该方法的兼容性取决于依靠计算的兼容性，缺点是需要知道子元素的宽度和高度

  点击查看完整DEMO

  绝对+变换

  或者绝对放置，但这种方法不需要子元素的固定width 和 height，所以已经不需要 size class 现在 HTML 代码如下

  <div class="wp">
      <div class="box">123123</div>
  </div>
  复制代码

  您还可以使用 CSS3 中的新转换来解决绝对定位问题。变换的translate属性还可以设置百分比，是相对于自身的宽高而言的，所以可以将translate设置为-50%，就可以实现居中，代码如下

  /* 此处引用上面的公共代码 */
  /* 此处引用上面的公共代码 */
  
  /* 定位代码 */
  .wp {
      position: relative;
  }
  .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  复制代码

  的兼容性此方法依赖于translate2d的兼容性

  点击可以看到完整的DEMO

  lineheight

  还可以利用内联元素的centering属性实现水平和垂直居中，HTML代码如下

  /* 此处引用上面的公共代码 */
  /* 此处引用上面的公共代码 */
  
  /* 定位代码 */
  .wp {
      position: relative;
  }
  .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }
  复制代码

  将框架作为线元素，并通过text-align将其水平居中，但很多同学可能不知道，这也可以通过vertical-align来完成。代码如下

  /* 此处引用上面的公共代码 */
  /* 此处引用上面的公共代码 */
  
  /* 定位代码 */
  .wp {
      line-height: 300px;
      text-align: center;
      font-size: 0px;
  }
  .box {
      font-size: 16px;
      display: inline-block;
      vertical-align: middle;
      line-height: initial;
      text-align: left; /* 修正文字 */
  }
  复制代码

  这个方法需要在子元素中重新设置文字显示到想要的效果

  点击查看完整DEMO

  书写模式

  很多同学一定和我一样，我也不知道关于属性书写模式。感谢@张髫兴老师的反馈。简单来说，书写模式可以改变文字显示的方向。比如可以使用Type模式将文本显示方向改为垂直

  <div class="div1">水平方向</div>
  <div class="div2">垂直方向</div>
  复制代码

  .div2 {
      writing-mode: vertical-lr;
  }
  复制代码

  显示效果如下：

  水平方向
  垂
  直
  方
  向
  复制代码

  更神奇的是所有水平的CSS属性都变成了垂直属性，比如文本对齐方式，通过 书写模式 使用

  使用 可以将文本居中一点，但水平方向上您可以将其对齐一些 这个方法是实现和理解有点复杂

  点击查看完整DEMO

  table

  Table曾经用于页面布局，但现在已经没有人这样做了，不过table也可以实现水平和垂直居中，但是它添加了很多冗余代码

  <table>
      <tbody>
          <tr>
              <td class="wp">
                  <div class="box">123123</div>
              </td>
          </tr>
      </tbody>
  </table>
  复制代码

  表格单元格中的内容自然是垂直居中只需添加水平居中属性即可

  .wp {
      text-align: center;
  }
  .box {
      display: inline-block;
  }
  复制代码

  这种方法代码冗余太多，不是表格的正确使用方式

  点击查看查看完整的DEMO

  css-table

  css new 添加的table属性允许我们将常见元素转换为元素，将其变成具有逼真效果的表格元素。通过这个功能也可以实现水平居中和垂直居中

  <div class="wp">
      <div class="box">123123</div>
  </div>
  复制代码

  使用下面的css属性，可以让div看起来和表格一样

  .wp {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }
  .box {
      display: inline-block;
  }
  复制代码

  这个方法和表格原理一样，但又不是。冗余代码多，兼容性还不错

  点击查看完整DEMO

  flex

  flex作为一种现代化的布局解决方案，颠覆了以往的体验，只需几行代码就可以优雅地平衡垂直居中

  <div class="wp">
      <div class="box">123123</div>
  </div>
  复制代码

  .wp {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  复制代码

  目前移动端可以使用flex。 PC端需要检查自己业务的兼容性

  点击查看完整DEMO

  grid

  感谢@触丝反馈此方案，css新的网格布局，兼容性不是很好好的，我没太注意。用网格也可以实现水平和垂直居中

  <div class="wp">
      <div class="box">123123</div>
  </div>
  复制代码

  .wp {
      display: grid;
  }
  .box {
      align-self: center;
      justify-self: center;
  }
  复制代码

  代码量也很少，但是兼容性不如flex。不建议使用

  点击查看完整DEMO

  总结

  我们来比较一下每种方法的优缺点。这绝对是同学该说点什么的时候了。简单总结一下

  • PC端有兼容性要求，宽度和高度是固定的。推荐绝对+负边距
  • PC端有兼容性要求，宽高不固定，推荐css-table
  • PC端无兼容性要求，推荐flex
  • 移动端推荐flex

  **施提示：**Flex兼容性解决方案可以在这里找到《移动端flex布局实战》

  方法	固定宽度和高度的居中元素	PC兼容性	绝对负边框移动兼容性是	ie6+、chrome4+、firefox2+	Android 2.3+、iOS6+绝对+自动边距	是	ie6a、iOS 6+、chrome 3+6、firefox.2 +
  绝对+微积分 是的+♻
  +♻
  +4+ Android 3+、iOS6+书写模式	否	ie6+、chrome4+、firefox3.5+	Android 2.3 +、iOS5+ .1+
  行高	否	ie6+、chrome4+、firefox2+	Android 2.3+、iOS6+
  表格	否否否否❙ 没有♻
  + 4+ 4	Android 2.3+ Android 2.3+、iOS6+
  css-表格	no	ie8+、Chrome4+、Firefox2+	android 2.3+、iOS6+
  flex	无	ie10+、Chrome4+、Firefox2+	Android 2.3+、iOS6+
  grid	否	ie10+、chrome57+、firefox52+	Android 6+、iOS10.3+ 我最近才发现，原来有这么多学生对css重视不够。这实际上是不正确的。像下面这样简单的题，不会的同学真多，我无语了 <div class="red blue">123</div> <div class="blue red">123</div> 复制代码 .red { color: red } .blue { color: blue } 复制代码 作者：颜海静 链接：https://juejin.im/post/5b9a4477f265da0ad82bf921来源：掘金 版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。