以简单、现代的方式使内容响应式居中，使用 CSS transform、Flexbox、Grid 等现代布局技术，这些技术能够更轻松地实现内容的居中，并且更符合响应式设计的需求，从而提高页面的可读性和视觉吸引力。

使用 transform 的注意事项
1. 在position:absolute下，translateX(50%)将相对于该元素的最近具有定位的祖先元素进行移动，如果没有祖先元素，则相对于最初的包含块进行移动。
2. 在position:relative下，translateX(50%)将相对于元素自身的宽度进行移动，这可能不会产生预期的效果，因为它会将元素的中心点移动到父元素的右侧，并不是你想要的。

内联元素

水平居中
text-align transform flex grid 
1
2
3
#app{
    text-align: center;
}
1
2
3
4
5
6
7
8
#app{
    position: relative;
}
#app>*{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
1
2
3
4
#app{
    display: flex;
    justify-content: center;
}
1
2
3
4
#app{
    display: grid;
    justify-content: center;
}
垂直居中
line-height transform flex grid 
1
2
3
4
5
6
#app{
  /* 当知道父级块的高度时可以
  将line-height属性设置为一样
  的大小即可垂直居中 */
  line-height: 200px;
}
1
2
3
4
5
6
7
8
#app{
    position: relative;
}
#app>*{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
1
2
3
4
#app{
  display: flex;
  align-items: center;
}
1
2
3
4
#app{
  display: grid;
  align-items: center;
}
水平垂直居中
line-height + text-align transform flex grid 
1
2
3
4
#app{
  text-align: center;
  line-height: 200px;
}
1
2
3
4
5
6
7
8
9
#app{
    position: relative;
}
#app>*{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
1
2
3
4
5
#app{
  display: flex;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5
#app{
  display: grid;
  justify-content: center;
  align-items: center;
}

块级元素

margin transform flex grid 
1
2
3
4
5
6
#app{
    //...
}
#app>div{
  margin: auto; //或者 0 auto
}
1
2
3
4
5
6
7
8
#app{
  position: relative;
}
#app>div{
  position: relative;//或者absolute
  left: 50%;
  transform: translateX(-50%);
}
1
2
3
4
#app{
  display: flex;
  justify-content: center;
}
1
2
3
4
#app{
  display: grid;
  justify-content: center;
}
margin transform flex grid 
1
2
3
4
5
6
7
8
9
#app{
    //...
}
#app>div{
  margin: auto; //或者 0 auto
  position: absolute;
  top: 0;
  bottom: 0;
}
1
2
3
4
5
6
7
8
#app{
  position: relative;
}
#app>div{
  position: relative;//或者absolute
  top: 50%;
  transform: translateY(-50%);
}
1
2
3
4
#app{
  display: flex;
  align-items: center;
}
1
2
3
4
#app{
  display: grid;
  align-items: center;
}
margin transform flex grid 
1
2
3
4
5
6
7
8
9
10
11
#app{
    //...
}
#app>div{
  margin: auto; //或者 0 auto
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
1
2
3
4
5
6
7
8
9
#app{
  position: relative;
}
#app>div{
  position: relative;//或者absolute
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
1
2
3
4
5
#app{
  display: flex;
  justify-content: center;
  align-items: center;
}
1
2
3
4
5
#app{
  display: grid;
  justify-content: center;
  align-items: center;
}