CSS settings text is centered, a line of text centered, two or more lines of text is also centered, with effect diagram

Figures:

1. Use the Flex layout for

Demo.html

1 <div class= "Demo Demo-flex" ><span> Lone cloud will be wild cranes, not to live in the Earth. Do not buy the mountain, when the known place. </span></div>

Style.css

1 . Demo {2 width:120px;3 height:200px;4 border:1px solid red;5         /*line-height:25px;*/6font-size:12px;7       }8. demo-flex{9 Display:flex;Tenalign-Items:center; Onejustify-Content:center; Aflex-Direction:column; -}

2. Using attribute Line-height

<div id= "box" >
<span> text up/down center </span>
</div>

Style.css

1 #box {2      width:200px; 3       height:120px; 4       border:1px solid red; 5       text-Align:center; 6 }7#box span {8       line-height:120px; 9 }

Note: This method applies only to single-line text

3. Using position positioning to achieve

4. Using Vertical-align to achieve

CSS settings text is centered up and down, one line of text is centered, and two or more lines of text are also centered, accompanied by