css多行文本垂直居中

2021-10-23 13:22:32

211

方法1 ； 父级设行高 子级inline-block 重新设置行高    

<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body {       
            background-color: #94fcff;
        }
        .wrap{
            height: 300px;
            background-color: #ffbc9a;
            line-height: 300px;
        }
        .box {
            background-color: red;
             display: inline-block;
            vertical-align: middle;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box">
        我是浮动的盒子 我要居中 我是浮动的盒子 我要居中我是浮动的盒子 我要居中我是浮动的盒子 我要居中 我是浮动的盒子 我要居中我是浮动的盒子 
我要居中 我是浮动的盒子 我要居中我是浮动的盒子 我要居中 我是浮动的盒子 我要居中
    </div>
</div>

方法2 子级与父级高度一致

.wrap{
            height: 300px;
            background-color: #fff;

        }
        .box {
            display: table-cell;
            vertical-align: middle;
            height: 300px;
        }

方法3 flew

.box {
            display: flex;
            align-items: center;
            height: 300px;
        }

其他定位相关的方法就不写了相信很容易找到

上一篇：css多行文本垂直居中问题研究下一篇：CSS之未知高度多行文本垂直居中

网站建设

Css

css多行文本垂直居中