css3使用translate实现水平、垂直方向居中效果
CSS
2023-05-18 10:07:27
对指定元素进行水平方向、垂直方向剧中展示,在大多数效果中都是常见应用。文中介绍基于css3属性transform实现未知div宽高,实现水平、垂直居中处理。
水平、垂直居中完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="test">
<div class="box">六月初博客站</div>
</div>
<style>
.test{
height: 200px;
width: 400px;
border: 1px solid #000;
position: relative;
}
.box{
padding: 20px 40px;
border: 1px solid #f00;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%)
}
</style>
</body>
</html>
代码解析:
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
文中应用transform属性的位移效果,即translate。
语法:transform:translate(x,y)
x即x轴方向移动,可使用固定像素如50px,也可以使用百分比如50%
y即y轴方向移动,同样可使用固定像素如50px,也可以使用百分比50%
注:这里的移动百分比,相对于div本身的百分比进行移动
关于x轴、y轴正负值解析:
x轴:值为正数,即红色箭头向右移动指定像素或百分比。
x轴:值为负数,即绿色箭头向左移动指定像素或百分比。
y轴:值为正数,即红色箭头向上移动指定像素或百分比。
y轴:值为负数,即绿色箭头向下移动指定像素或百分比。
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
1462人已阅读