[分享]css元素文字居中方式

CSS中的文字居中一直是开发者比较关注的问题。在实际开发中，有多种方式可以使文本水平居中和垂直居中，下面将介绍一些常用的方式。/ 水平居中 / / 方法一：使用textalign / .contain...

CSS中的文字居中一直是开发者比较关注的问题。在实际开发中，有多种方式可以使文本水平居中和垂直居中，下面将介绍一些常用的方式。

/* 水平居中 */

/* 方法一：使用text-align */
.container {
  text-align: center;
}

/* 方法二：使用margin */
.container {
  display: flex;
  justify-content: center;
}

/* 方法三：使用position和transform */
.container {
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 垂直居中 */

/* 方法一：使用line-height */
.container {
  height: 200px;
  line-height: 200px;
}

/* 方法二：使用display和align-items */
.container {
  display: flex;
  align-items: center;
}

/* 方法三：使用position和transform */
.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

以上是CSS中常用的文字水平居中和垂直居中的方式，开发者可以根据自己的需求选择适合自己的方法来实现文字居中效果。