css中如何实现多行文本于一个块级元素中居中

最新推荐文章于 2022-10-09 16:08:17 发布

东湖散人

最新推荐文章于 2022-10-09 16:08:17 发布

阅读量335

点赞数

分类专栏： css部分文章标签： css 多行文本居中显示

本文链接：https://blog.csdn.net/shadema/article/details/103099463

版权

css部分专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css中如何实现多行文本于一个块级元素中居中

案例效果:

即实现多行文本在一个div 框中进行水平垂直居中:

相关html 结构如下:

<div class="contain contain1">
    <div class="sub-contain">
        <p>hello world1</p>
        <p>hello world2</p>
    </div>
    <!---绘制两个小圆--->
    <div class="circle1"></div>
    <div class="circle2"></div>
</div>

css样式结构如下:

    .contain{
        position: relative;
        width: 500px;
        height: 300px;
        margin: 0 auto;
        border: 1px solid darkred;
        margin-top:100px;
        border-radius: 50%;	
    }
    .contain1{
        display: table;
    }
    .sub-contain{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

主要是使用父元素的display:table 布局，对应子元素：display:tables-cell 布局来实现，vertical-align 是调整使其竖直方向居中

text-align：center是调整使其水平方向居中，从而达到多行文本在一个div 中居中展示的效果。