Several ways to align the text to the center

several ways to summarize the center of text 1. Method One

CSS
#target {
width:150px;
BORDER:1PX Purple Solid;
line-height:40px;
text-indent:40px;
Background-image:url (' icon.png ');
Background-repeat:no-repeat;
background-position:0px Center;
}
HTML
<div id= "Target" >
I'm a repair
</div>

Effect Diagram

Code Explanation
Take the picture as a background, then use Background-position to center the background, and use Text-align to center the text so that it is centered. 2. Method Two

CSS
#target {
width:150px;
height:40px;
BORDER:1PX Purple Solid;
}
#helper {
Display:inline-block;
width:2px;
height:100%;
background-color:red;
}
#target img{
Vertical-align:middle;
}
#target span{
Vertical-align:middle;
}

HTML
<div id= "Target" >
<span id= "helper" ></span>

<span> I'm a repair </span>
</div>

Effect Diagram

Code Explanation
Create a child element in the #target that is used to center-align #helper, which should be higher than the parent element, and then center-align using Vertical-align=middle.
However, in general, in order not to affect the structure of the code, we usually use pseudo-element before or after to replace the #helper, that is to read as follows:

CSS
#target {
width:150px;
height:40px;
BORDER:1PX Purple Solid;
}
#target: after{
Content: "";
Display:inline-block;
height:100%;
background-color:red;
width:2px;
Vertical-align:middle;
}
#target img{
/* Make the contents of the IMG Participating line box vertically centered */
Vertical-align:middle;
}
#target span{
Vertical-align:middle;
}

HTML
<div id= "Target" >

<span> I'm a repair </span>
</div> 3. Method Three

#target {
width:150px;
height:40px;
BORDER:1PX Purple Solid;
position:relative;
}
#target img, #target span{
Position:absolute;
top:50%;
Transform:translatey (-50%);
}
#target img{
left:0px;
}
#target span{
left:40px;
}

Effect Show

The

code interprets the top:50%;left:50% of the
position, which is relative to the interface width. The -50%,-50% of translate is relative to the height of the div itself. It is equivalent to centering the upper left corner of the Div, then centering the Div center point.