css 在页面水平垂直居中显示

在网页的开发过程中，经常会遇到需要将某些元素水平垂直居中显示的需求，而CSS可以解决这个问题。

下面就介绍几种实现水平垂直居中的CSS方式：

/* 第一种方式：使用flex布局 */.box {
      display: flex;
      justify-content: center;
      align-items: center;
  /* 其他样式 */}
/* 第二种方式：使用绝对定位 */.box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  /* 其他样式 */}
/* 第三种方式：使用table布局 */.table {
      display: table;
      width: 100%;
      height: 100%;
}
.cell {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
  /* 其他样式 */}
    

除了上面三种方式，还有其他一些方法，比如使用JavaScript或CSS Calc函数等。但是需要注意的是，不同的场景下使用不同的方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！