CSS Text Vertical centering problem

CSS Text Vertical centering problem

Problem: Center text in div: when using line-height:100%%; , the text is not centered, as follows:

HTML: <div id= "Header_logo_des" ></div>
CSS: #header_logo_des {    width:100%;    height:100%;    font-size:28px;    Text-align:center;    line-height:100%;  /* Set Line-height to be equal to the height of the parent element, cannot use%;*/}

But the results are as follows:

Reason:

The Line-height property sets the distance between lines (row height) 1. cannot be a negative value; 2. Preferably set to a specific pixel value, such as: Line-height:60px;3. In most browsers, the default row height is approximately 110% to 120%;

Workaround:

1. Use pixel values:

eg:  line-height:60px;  60px, is the height of the current div

2. Use%:

eg:line-height:200%;  Percentage of height increase

3. No longer use div to write text directly, you can use other inline tags to include text, eg: <span>

HTML: <span> years quiet good </span>css:  span{    font-size:28px;    Display:block;  Inline elements--block-level    text-align:center;  Text horizontally centered    line-height:200%;  Text vertically Centered}

4. Vertical centering Vertical-align:middle; Often used for vertical centering of pictures

Note: vertical-align:middle;  Do not put in the Div, because the <div>, <span> such elements are not valign features

5. Flex: Horizontal Vertical Center

HTML: <div id= "des" >          <span> years quiet good </span>      </div>css: #des {    width:100px;    height:100px;    Display:flex;    border:2px solid #ffcfd3;    Background-color: #bacaee;} #des span{    Display:flex;    flex:1;    justify-content:center;/* Horizontal Axis */    align-items:center;/* Vertical axis */}

CSS Text Vertical centering problem