*新闻详情页*/>
translate(-50%,-50%) 特性:
往上和左,移动本身宽度的 50%,使其处于管理中心部位。
与应用margin完成垂直居中不一样的是,margin务必了解本身的宽高,而translate能够不在了解宽高的状况下开展垂直居中,tranlate涵数中的百分数是相对性于本身宽高的百分数
(应用top和left为50%时,以对话框左上方为原点)。
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style media="screen"> .container { position: relative; width: 50%; } .container img { width: 100%; display: block; height: auto; } .overlay { width: 100%; height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; transition: 0.5s ease; background: rgb(0, 0, 0); } .container:hover .overlay { opacity: 0.5; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } </style> </head> <body> <h2>淡入实际效果</h2> <div class="container"> <img src="./img/photo2.jpg" alt="Avatar" class="image"> <div class="overlay"> <div class="text">Hello World</div> </div> </div> </body> </html>
实际效果:
到此这篇有关CSS中的translate(-50%,-50%)完成水准竖直垂直居中实际效果的文章内容就详细介绍到这了,大量有关css translate水准竖直垂直居中內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 (网站地图) 粤ICP备10235580号