平武建站

css实现div垂直水平居中常用方法分享

本篇内容主要讲解“css实现div垂直水平居中常用方法分享”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css实现div垂直水平居中常用方法分享”吧!

成都创新互联公司服务项目包括新巴尔虎左网站建设、新巴尔虎左网站制作、新巴尔虎左网页制作以及新巴尔虎左网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，新巴尔虎左网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到新巴尔虎左省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

方法一：

利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件：

  1. 设置父元素的行高line-height等于父元素height的高度

  2. 子元素必须是行内块级元素display:inline-block;

  3. 子元素设置vertical-align：middle

  4. 此方法在开发中不能右浮动(不能靠右边)

下方是完整代码，可以新建一个HTML文件进行测试(绿色的盒子)：



导航条





xxxxxxxxxxx
    
    
         

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前端工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：784783012 欢迎大家进群学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有效资源还是很有必要的。

方法二：

这种方法比较暴力，利用定位解决：

  1. 父元素开启相对定位

  2. 子元素绝对定位

  3. 子元素先向下移动父元素的50%，此时子元素的顶部与父元素的中线对齐了

  4. 子元素再向上移动自身高度"height"的一半，此时子元素的中线和父元素的中线对齐了

  5. 此方法可以右对齐，设置子元素right：0px;即可

下方是完整代码，可以新建一个HTML文件进行测试(绿色的盒子)：



导航条





    
    

到此，相信大家对“css实现div垂直水平居中常用方法分享”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


文章名称：css实现div垂直水平居中常用方法分享
URL地址：http://pwwzsj.com/article/gijogh.html

其他资讯