css:实现多行文本居中的五种方法

牛奶面包吖

已于 2023-04-10 13:55:12 修改

阅读量4.9k

点赞数 3

分类专栏： css 文章标签： css web 前端

于 2022-10-09 16:08:17 首次发布

本文链接：https://blog.csdn.net/qq_50487248/article/details/127226517

版权

本文介绍了五种使用CSS实现多行文本居中的方法：1) 父元素设为table，子元素设为table-cell并垂直居中；2) 利用高度、line-height和inline-block定位；3) 脱离文档流的方式；4) 使用弹性盒模型flex布局；5) 通过inline-block结合相对定位和平移实现。每种方法都有相应的代码示例和效果展示。

摘要由CSDN通过智能技术生成

1.父display: table;+子display: table-cell;+vertical-align: middle

设置的代码：

.father{
    width: 400px;
    height: 400px;
    background-color: red;
    display: table;
}
.son{
    background-color: orange;
    display: table-cell;
    vertical-align: middle;
}
</style>
<body>
    <div class="father">
        <div class="son">
            <span> 1.父元素使用display: table;和子元素 display: table-cell;
            来模拟表格，子元素再使用vertical-align: middle即可实现垂直居中。</span>
        </div>
    </div>
</body>