1 .行高line-height (适用于单行或少数字符)使字符的行高与容器的高度相同
div id='div1'单行文本或数字垂直居中/divstyle#div1{ width: 300px； height: 100px； /*容器宽度高度*/margin: 100px auto； /*自动使集装箱水平边距相等*/border: 1px solid red； /*文本边框使效果更清晰*/line-height: 100px； 设置line-height和rongqi的height相等的*/text-align: center； /*设置文本水平居中*/overflow :隐藏； /*防止内容超出容器或发生自动换行符*//style
2 .多行文字-内容填充padding简单地说，就是把文字放在中间，此时容器的高度不固定
div id='div1'多行文字垂直居中多行文字垂直居中多行文字垂直居中/divstyle#div1{ width: 300px； margin: 100px auto； /*自动使集装箱水平边距相等*/border: 1px solid red； /*文本边框使效果更清晰*/line-height: 100px； 设置line-height和rongqi的height相等的*/text-align: center； /*设置文本的水平居中*/padding:50px 20px； (}/style
3 .多行文本vertical-align，在div中模拟tabel vertical-align仅对具有valign特性的元素有效
div id='div1'div id='div2'多行文字垂直居中多行文字垂直居中/div/div style # div1{ width 3360300 px； height: 200px； margin: 100px auto； /*自动使集装箱水平边距相等*/border: 1px solid red； /*给文本加上边框可以更清楚地看到效果*/display: table； }#div2{display: table-cell； vertical-align :中间； 文本照明3360中心； width: 100%； (}/style
4 .子容器垂直居中-定位子绝亲相移动，根据子容器大小定位移动
div id='div1'div id='div2'子容器的垂直居中/div/div style # div1{ width 3360300 px； height: 200px； background-color: #ccc； 定位：关系； }#div2{width: 100px； height: 100px； background-color: #FB7299； 边距：自动； 定位：助手； left: 50%； top:50%； 边距-顶部：-50px； 边距左边缘：-50px； (}/style