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; /* 实现垂直居中 */
}

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