CSS中translate实现水平垂直居中效果的方法

这篇“CSS中translate实现水平垂直居中效果的方法”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS中translate实现水平垂直居中效果的方法”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

translate(-50%,-50%) 属性:向上和左,移动自身长宽的 50%,使其居于中心位置。

与使用margin实现居中不同的是,margin必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中,tranlate函数中的百分比是相对于自身宽高的百分比(使用top和left为50%时,以窗口左上角为原点)。

示例:

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<stylemedia="screen">
.container{
position:relative;
width:50%;
}

.containerimg{
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.5sease;
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>
<h3>淡入效果</h3>

<divclass="container">
<imgsrc="./img/photo2.jpg"alt="Avatar"class="image">
<divclass="overlay">
<divclass="text">HelloWorld</div>
</div>
</div>
</body>

</html>

效果:

CSS中translate实现水平垂直居中效果的方法

感谢你的阅读,希望你对“CSS中translate实现水平垂直居中效果的方法”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注恰卡编程网行业资讯频道!

发布于 2021-03-17 20:53:06
收藏
分享
海报
0 条评论
169
上一篇:CSS布局中浮动问题怎么解决 下一篇:CSS中如何使用text-align、margin:0 auto居中
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码