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代码：

<div class="onediv">我高度为300px,实现上下左右居中</div>

效果图：

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代码：

<div class="twodiv">
    我是第一排<br />
    我是第二排<br />
    我是第三排
</div>

效果图：