HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS结构样式 ——> CSS实现水平垂直居中 - CSS3的calc高端方法

CSS实现水平垂直居中 - CSS3的calc高端方法

2015/08/07 12:19:42 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS结构样式 | 关键词:CSS,calc,水平垂直,居中

CSS实现水平垂直居中 - CSS3的calc方法

HTML5学堂:今天又来给大家分享实现水平垂直居中的新做法,利用到了CSS3的calc( )来实现水平垂直居中,当然水平垂直居中做法那么多,各有各的优缺点。那赶紧来看看我们今天的新方法。

欢迎沟通交流~HTML5学堂

盒模型的组成

盒模型

什么是calc()

calc()属于CSS3,用于动态计算长度值,可以用在任何一个需要的地方。有了calc(),你可以通过计算来决定一个对象的大小和形状。还可以在一个calc()内部嵌套另一个calc()。妈妈再也不担心我水平垂直居中不了了。

示例分析

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - HTML5学堂 - 利用CSS3的calc( )实现水平垂直居中</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <style>
  8.         .wrap {
  9.             width: 400px;
  10.             height: 400px;
  11.             background-color: #ccc;
  12.         }
  13.         .wrap .con {
  14.             /*利用CSS3的calc() ,它的用法类似于函数,能够给元素设置动态的值:*/
  15.             /*(父级的宽度 - 自身的宽度)的一半当做padding的值*/
  16.             padding: -webkit-calc((100% - 100px) / 2);
  17.             padding: -moz-calc((100% - 100px) / 2);
  18.             padding: -ms-calc((100% - 100px) / 2);
  19.             padding: calc((100% - 100px) / 2);            
  20.             width: 100px;
  21.             height: 100px;
  22.             background-color: pink;
  23.             color: #fff;
  24.             /*背景只显示内容区域*/
  25.             background-clip: content-box;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="wrap">
  31.         <div class="con">HTML5学堂 - 刘国利、陈能堡</div>
  32.     </div>
  33. </body>
  34. </html>

效果

利用calc实现水平垂直居中

calc()支持程度

calc支持程度

相关文章推荐

CSS实现元素水平垂直居中

CSS实现元素水平垂直居中 - 网易方法

CSS实现元素水平垂直居中 - 其他方法

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端