html如何设置字体纵向居中,css 如何使文字垂直居中

单行文本，只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

/*css代码*/

#div1{

width: 300px;

height: 100px;

margin: 50px auto;

border: 1px solid red;

line-height: 100px; /*设置line-height与父级元素的height相等*/

text-align: center; /*设置文本水平居中*/

overflow: hidden; /*防止内容超出容器或者产生自动换行*/

}

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充(padding)的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

/*css代码*/

#div1{

width: 300px;

margin: 50px auto;

border: 1px solid red;

text-align: center; /*设置文本水平居中*/

padding: 50px 20px;

}

父级高度固定的时，设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle

/*css代码*/

#outer{

width: 400px;

height: 200px;

margin: 50px auto;

border: 1px solid red;

display: table;

}

#middle{

display:table-cell;

vertical-align:middle;

text-align: center; /*设置文本水平居中*/

width:100%;

}