一.单行文本中心方式效果图如下：
HTML代码
div id='container' div id='text '垂直水平居中文本/div/div css样式
#container { width: 600px； height: 300px； border : 1px固态黑； }#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固态黑； 显示：表； }#text{ display: table-cell； vertical-align :中间； 文本照明3360中心； } 方法二：为父元素与子元素设置不同的line-height
#container{ width: 600px； height: 300px； border : 1px固态黑； line-height: 300px； } # text { display : inline-block； vertical-align :中间； line-height: 22px； 注意)父元素的line-height=父元素的高度height，子元素的line-height根据情况设定适当的值。
三.多行文本居中下li标签居中方式效果图如下：
HTML代码
divid=' container ' ulli 1111111111/Li Li 22222222/Li Li 33333333333/Li/ul/div http://www.Sina.com /
#container{ width: 600px； height: 300px； border : 1px固态黑； line-height: 300px； 文本照明3360中心； }ul{ line-height: 22px； 显示：在线块； 边距： 0； padding: 0； list-style: none； } 方法一：为父元素与子元素设置不同的line-height
#container { width: 600px； height: 300px； border : 1px固态黑； 显示：表； }ul { margin: 0； padding: 0； 显示：表单元格； vertical-align :中间； 文本照明3360中心； }它们不仅可以设置文本，还可以通过在文本周围的框中设置居中来实现文本的居中。 有关方法一：利用display: table属性的信息，请参阅上一篇博客。
一个盒子的几种核心方法博客链接： https://blog.csdn.net/QQ _ 43692768/article/details/109412059