(1)单行文本的居中

水平居中：text-align：center;

垂直居中：line-height：xxpx；

例子

<div class=“div1”><p>单行文字</p></div>

.div1{

        width：300ox;

        margin：20px;

        background：#000；

        text-align：center;

}

.div1  p{

        color：#fff;

        font-size：16px;

        line-height：300px;

}

(2)多行文本的垂直居中

   1、使用display：table来实现

display：table；使块状元素成为一个块级表格

display： table-cell；子元素设置成表格单元格

vertical-align： middle；使表格内容居中显示，实现垂直居中的效果

例子

<div class=“div1”><p>多行文字</p></div>

.div1{

        position： relative;  

        width：300px;

        height：300px;

        margin：20px auto;

        background：#000;

        text-align： center;

        display：table;

}

.div1  p {

        coLor：#fff；

        font-size：16px；

        display：table-cell;

        vertical-align：middle;

}

  2、使用absolute与transform配合实现

position：absolute; 首先给文本绝对定位；

left：50%；top：50%;  让文本距离盒子左边和上边分别为50%，

transform：translate(-50%,-50%); 再向左向上平移自己高度和宽度的50%，实现居中效果。

例子

.div1{

        position: relative;  /*让元素相对定位*/

        width：300px; 

        height：300px;

        margin：20px auto；

        background：#000;

        text-align：center;

}

.div1  p{

        color：#fff; 

        font-size：16px;

        line-height：25px;

        width：100%;

        position：absolute;  /*让元素绝对定位*/

        left：50%; top：50%; 

        transform：translate(-50%，-50%); 

}

  3、使用flex实现

display： flex;   将其定义为弹性容器

align-items：center;   垂直对齐居中

justify-content：center;  水平对齐居中

例子

.div1 {

        position：relative;

        width：300px; 

        height：300px;

        margin：20px  auto;

        background： #000;

        text-align：center;

        display： flex;

        align-items：center;

        justify-content：center;

}

.div1  p{

        coLor：#fff; 

        font-size：16px;

        line-height：25px;

}

远近互联前端小王整理发布，希望能对学习技术的你有所帮助

远近互联专业提供网站建设、APP开发、网站优化、外贸网站SEO、微信运营的品牌整合营销服务让客户通过网络品牌建立与网络传播提高业绩。