您的位置：首页 > Web前端 > CSS

css3垂直居中的一种实现方法

2017-05-25 15:03 447 查看

translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。

1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央；

2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

以下是在网上查找到的关于translate和position：

相同点：两者都是相对于本身移动位置

区别：

1、当元素原来已经有position:absolute的时候，这时候你想相对于本身移动，可以使用translate

2、做动画的时候translate更适合，不会引起页面的重排和重绘

3、关于transform类的，可以使用GPU加速，提高浏览器的性能？总之：transform更适用于动画

源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
.wrapper {
padding: 20px;
background:orange;
color:#fff;
position:absolute;
top:50%;
left:50%;
border-radius: 5px;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
</style>

</head>
<body>
<div class="wrapper">
我不知道我的宽度和高是多少，我要实现水平垂直居中
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航