html设置多行文本垂直居中,css 实现div 中一行和多行文字水平和垂直居中 随笔...

css 实现div 中一行和多行文字水平和垂直居中 随笔

css 实现div 中一行和多行文字水平和垂直居中 随笔

备注：Css代码中注释的部分为第二种方法，可以自己尝试一下

css实现div中一行文字水平和垂直居中

css代码:

.onediv

{

/*display: table-cell;*/

/*text-align: center;*/

/*vertical-align:middle;*/

/*width: 400px;;*/

/*height:300px;*/

/*background-color: red;*/

width: 800px;

height: 300px;/*div高度*/

line-height: 300px;/*div中文字行距*/

text-align: center;/*div中文字水平居中*/

background-color:red;/*背景色*/

}

html代码：

我高度为300px,实现上下左右居中

效果图：

css实现div中多行文字水平和垂直居中

css代码：

.twodiv

{

width: 400px;/*div宽度*/

height: 220px;/*div高度*/

padding-top: 220px;/*这里的值和div高度一致*/

padding-bottom: 100px;/*这里的值固定为100*/

text-align: center;/*div中的文字水平居中*/

background-color: aqua;/*设置背景色*/

/*display: table-cell;*/

/*vertical-align:middle;*/

/*text-align:center;*/

/*background-color: aqua;*/

/*优点：等高布局，无需设置高度，文字轻松实现垂直居中*/

/*缺点：ie7以下不兼容！*/

}

html代码：

我是第一排

我是第二排

我是第三排

效果图：

css 实现div 中一行和多行文字水平和垂直居中 随笔相关教程