DIV垂直居中的几类經典完成方式及其缺陷详细介

摘要: 1. 完成DIV水准垂直居中设定DIV的宽高,应用margin设定行高0 auto,CSS全自动算出上下行高,促使DIV垂直居中。div{ width: 100px; height: 100px; margin: 0 auto; }缺陷:必须设定div的总宽2. 完...

1. 完成DIV水准垂直居中

设定DIV的宽高,应用margin设定行高0 auto,CSS全自动算出上下行高,促使DIV垂直居中。

div{

     width: 100px;

     height: 100px;

     margin: 0 auto;

 }

缺陷:必须设定div的总宽

2. 完成DIV水准、竖直垂直居中

要让DIV水准和竖直垂直居中,必不可少了解该DIV得总宽和高宽比,随后设定部位为肯定部位,间距网页页面对话框左侧框和上面框的间距设定为50%,这一50%便是指网页页面对话框的总宽和高宽比的50%,最终将该DIV各自左移和上移,左移和上移的尺寸便是该DIV总宽和高宽比的一半。

div{

    width: 100px;

    height: 100px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -50px 0 0 -50px;

}

缺陷:必须设定position特性,网页页面繁杂时非常容易搅乱网页页面合理布局,并且仅仅原素的起止部位垂直居中

3. 文字在DIV中水准、竖直垂直居中(text-align + line-height)

1)text-align 特性要求(块级)原素内文字的水准两端对齐方法。

2)line-height = height,行高相当于原素高宽比,用于完成竖直垂直居中。

div{

    width:200px;height:200px;  /*设定div的尺寸*/

    border:1px solid green;    /*外框*/

    text-align: center;        /*文本水准垂直居中两端对齐*/

    line-height: 200px;        /*设定文本行间距相当于div的高宽比*/

    overflow:hidden;

}

标识: CSS实例教程 水准垂直居中


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:抽奖h5