怎样使p标签水平垂直居中在div 盒子里

img

img

img


p标签转成块以后怎样使文字水平垂直居中在块里并且也水平垂直居中在div 盒子里

猜测你页面的结构是如下。

    <div class="title">
        <p>个人博客</p>
    </div>

可以这样更改。

   .title {
            width: 800px;
            height: 100px;
            background-color: #1e90ff;
            margin: 15px auto;

            /* 第二种 */
            display: flex;
            /* 垂直居中 */
            align-items: center;
        }

        .title p {
            display: block;
            width: 200px;
            /* 第一种 修改p标签的高度*/
            height: 100px;
            line-height: 100px;
            /* 第二种 不修改高度和行高*/
            height: 70px;
            line-height: 70px;

            /* p标签文字居中 */
            text-align: center;

            margin: 0 auto;
            color: #ffffff;
        }

如果只是简单的文字效果，可以不用添加p标签。

让盒子垂直居中，用padding，margin手动都行，这里用弹性布局示范

<div style="width: 400px;height: 250px;background: pink;">
    <p style="width: 200px;height: 100px;background: #ccc;">我是Maker_小白</p>
</div>
<style>
    div{
        text-align: center;
        display: flex;
        align-items: center;
    }
    p{
        line-height: 100px;
        margin: auto;
        letter-spacing: 4px;/*文字间距给了4px*/
        text-indent: -4px;/*往前缩进4px就行*/
    }
</style>

img