注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

【转载】CSS实现水平垂直居中-CSS3的calc方法  

2015-11-23 19:56:27|  分类: CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

CSS实现水平垂直居中 - CSS3的calc方法
HTML5学堂:今天又来给大家分享实现水平垂直居中的新做法,利用到了CSS3的calc( )来实现水平垂直居中,当然水平垂直居中做法那么多,各有各的优缺点。那赶紧来看看我们今天的新方法。
欢迎沟通交流~HTML5学堂
盒模型的组成
CSS实现水平垂直居中-CSS3的calc方法 - 梦幻雪冰 - 梦幻雪冰
 什么是calc()
calc()属于CSS3,用于动态计算长度值,可以用在任何一个需要的地方。有了calc(),你可以通过计算来决定一个对象的大小和形状。还可以在一个calc()内部嵌套另一个calc()。妈妈再也不担心我水平垂直居中不了了。
示例分析

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - HTML5学堂 - 利用CSS3的calc( )实现水平垂直居中</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
width: 400px;
height: 400px;
background-color: #ccc;
}
.wrap .con {
/*利用CSS3的calc() ,它的用法类似于函数,能够给元素设置动态的值: */
padding: -webkit-calc((100% - 100px) / 2);
padding: -moz-calc((100% - 100px) / 2);
padding: -ms-calc((100% - 100px) / 2);
padding: calc((100% - 100px) / 2);
width: 100px;
height: 100px;
background-color: pink;
color: #fff;
/*背景只显示内容区域*/
background-clip: content-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="con">HTML5学堂 - 刘国利、陈能堡、梦幻雪冰</div>
</div>
</body>
</html>

效果
CSS实现水平垂直居中-CSS3的calc方法 - 梦幻雪冰 - 梦幻雪冰
 支持程度
CSS实现水平垂直居中-CSS3的calc方法 - 梦幻雪冰 - 梦幻雪冰
 
详细介绍请点击:http://www.h5course.com/plus/view.php?aid=290
欢迎学习交流:梦幻雪冰
  评论这张
 
阅读(9)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017