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

约定不等于承诺〃 2022-01-21 12:01 232阅读 0赞

备注：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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDEzNjg1_size_16_color_FFFFFF_t_70][]

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>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDEzNjg1_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDEzNjg1_size_16_color_FFFFFF_t_70]: /images/20220121/e3fa8b17bf2a40f29bf1b588fe47cbc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDEzNjg1_size_16_color_FFFFFF_t_70 1]: /images/20220121/72591d584db9464fa123d559bd782227.png