CSS 实现元素水平和垂直居中的常用方法

Flexbox 布局

• 父容器使用 Flexbox 布局实现子元素的水平和垂直居中。

  .container {
    display: flex;
    align-items: center; /* 实现垂直居中 */
    justify-content: center; /* 实现水平居中 */
  }

• 结合 Flexbox 和 margin: auto; 属性实现水平和垂直居中。

  .container {
      display: flex;
  }
  
  .child {
      margin: auto; /* 同时实现水平和垂直居中 */
  }

Grid 布局

父容器使用 Grid 布局实现子元素的水平和垂直居中。

.container {
  display: grid;
  place-items: center; /* 同时实现水平和垂直居中 */
}

Table 属性

使用 Table 属性实现水平和垂直居中。

.container {
  width: 100px;
  height: 100px;
  display: table-cell;
  vertical-align: middle; /* 实现垂直居中 */
  text-align: center; /* 实现水平居中 */
}

.child {
  width: 20px;
  height: 20px;
  display: inline-block;
}

子绝父相

子绝父相表示：子元素设置绝对定位，父容器设置相对定位。

不知道子元素和父容器的高度

使用 position 和 transform 属性可以同时实现水平和垂直居中。

.container {
 position: relative;
}

.child {
 position: absolute;
 top: 50%; /* 实现垂直居中 */
 left: 50%; /* 实现水平居中 */
 transform: translate(-50%, -50%);
}

知道子元素和父容器的高度

使用 position 和 margin 属性同时实现水平和垂直居中。

.container {
   position: relative;
   height: 100vh;
}

.child {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto; /* 同时实现水平和垂直居中 */
}

line-height

如果子元素是单行文本，可以使用 line-height 来实现垂直居中。

.container {
    height: 100px;
    text-align: center; /* 实现水平居中 */
    line-height: 100px; /* 实现垂直居中 */
}

这个方法适用于只包含单行文本的元素。