[分享]css中如何让背景上的字居中

在CSS中如何让背景上的字居中？CSS是一种描述网页样式和布局的语言。在开发网站时，我们经常需要让文字和背景相配，以便网站看起来更加美观。然而，有时候我们需要让文字居中在背景上，这时候就需要使用一些C...

在CSS中如何让背景上的字居中？
CSS是一种描述网页样式和布局的语言。在开发网站时，我们经常需要让文字和背景相配，以便网站看起来更加美观。然而，有时候我们需要让文字居中在背景上，这时候就需要使用一些CSS技巧了。
下面介绍几种让文字居中在背景上的方法：
方法一：使用line-height
给背景元素设置一个高度，然后在CSS中将line-height设置为与该高度相同的值。如下所示：
pre{
background-color:#FFF;
height:100px;
line-height:100px;
text-align:center;
}
这样设置完后，文字将会居中显示在背景区域内。
方法二：使用display:flex
给背景元素设置display:flex; 和 align-items: center; 属性，文字就会自动居中。如下所示：
pre{
background-color:#FFF;
display:flex;
align-items:center;
justify-content:center;
}
这里的justify-content:center;属性用于水平居中文本。
方法三：使用position和transform
给文字设置position: absolute; 和transform属性，然后将文字的left和top设置为50%。如下所示：
pre{
background-color:#FFF;
position:relative;
height:100px;
}
pre span{
position:absolute;
display:block;
width:100%;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
这里的pre指的是背景元素，pre span指的是居中的文本元素。
总结
以上三种方法都可以使文本居中显示在背景上，但每种方法适用的场景不同。我们可以根据不同的需求来选择使用哪种方法。