Single-line text + multi-line text vertical and horizontal centering method

One, single-line text centering method

The renderings are as follows:
Single line of text vertically and horizontally centered renderings
HTML code

<div id="container">
    <div id="text">垂直水平居中的文本</div>
</div>

css style

#container {
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
}
#text{
    
    
    text-align: center;
    line-height: 300px;
}

Note: the line-height of the child element = the height of the parent element;

Two, multi-line text centering method

The renderings are as follows:
Effect picture of multi-line text centered vertically and horizontally

HTML code

<div id="container">
    <div id="text">多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法多行文本垂直水平居中的设置方法</div>
</div>

Method 1: Use display: tableattributes

#container{
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
    
    display: table;
}
#text{
    
    
    display: table-cell; 
    vertical-align:middle;
    text-align: center;
}

Method 2: Set different for parent element and child elementline-height

#container{
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
    line-height: 300px;
}
#text{
    
    
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}

Note: The line-heightparent element's height = the parent element's height height, and the child element line-height's value should be set according to the actual situation.

Third, the centering method of the li label based on the centering of the multi-line text

The renderings are as follows:
Li label centered based on multi-line text centered

HTML code

<div id="container">
    <ul>
        <li>1111111111</li>
        <li>2222222222</li>
        <li>3333333333</li>
    </ul>
</div>

Method 1: Set different for parent element and child elementline-height

#container{
    
    
    width: 600px;
    height: 300px;
    border: 1px solid black;
    
    line-height: 300px;
    text-align: center;
}
ul{
    
    
    line-height: 22px;
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

Method 1: Use display: tableattributes

#container {
    
    
    width: 600px;
	height: 300px;
	border: 1px solid black;
    display: table;
}
ul {
    
    
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

The above are just the settings for the text, and the text can also be centered by setting the center of the box surrounding the text . For several centering methods of a box, please refer to my previous blog.
Several ways to center a box blog link: https://blog.csdn.net/qq_43692768/article/details/109412059