您当前位于：
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()。妈妈再也不担心我水平垂直居中不了了。
示例分析
-
<!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的值*/
-
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>
效果
calc()支持程度
相关文章推荐
CSS实现元素水平垂直居中
CSS实现元素水平垂直居中 - 网易方法
CSS实现元素水平垂直居中 - 其他方法
欢迎沟通交流~HTML5学堂
阅读：3607
极客编程技术分享
