单行文本+多行文本垂直水平居中的设置方法

一、单行文本居中方式

  效果图如下：

  HTML代码

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

  css样式

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

  注意：子元素的line-height = 父元素的height；

二、多行文本居中方式

  效果图如下：

  HTML代码

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

  方法一：利用display: table属性

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

  方法二：为父元素与子元素设置不同的line-height

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

  注意：父元素的 line-height = 父元素的高度height，子元素的line-height根据实际情况设置合适的值。

三、基于多行文本居中下的li标签居中方式

  效果图如下：

  HTML代码

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

  方法一：为父元素与子元素设置不同的line-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;
}

  方法一：利用display: table属性

#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;
}

  以上这些仅仅是对文本的设置，也可以通过对包围文本的盒子设置居中来实现文本的居中，关于一个盒子的几种居中方式可参考我的上一篇博客。
  一个盒子的几种居中方式博客链接：https://blog.csdn.net/qq_43692768/article/details/109412059