[分享]css3文字垂直水平居中

CSS3在前端开发中最常用的功能之一就是文字的垂直和水平居中，从而提高网页的美观性和可读性。以下介绍两种常用的实现方法。/方法一：使用绝对定位/ .container{ : relative; /父容...

CSS3在前端开发中最常用的功能之一就是文字的垂直和水平居中，从而提高网页的美观性和可读性。以下介绍两种常用的实现方法。

/*方法一：使用绝对定位*/
.container{
  position: relative; /*父容器使用相对定位*/
}

.text{
  position: absolute; /*绝对定位*/
  top: 50%; /*相对于父元素的顶部距离为50%*/
  left: 50%; /*相对于父元素的左侧距离为50%*/
  transform: translate(-50%,-50%); /*水平和垂直方向均偏移自身宽高的一半，实现文字的居中*/
}

/*方法二：使用flex布局*/
.container{
  display: flex; /*父容器设置为flex布局*/
  justify-content: center; /*水平方向居中*/
  align-items: center; /*垂直方向居中*/
}

.text{
  flex: 1; /*设定自身的占比*/
} 

以上两种方法都可实现文字的垂直和水平居中，具体选择哪种方法可以根据实际需求进行选择。