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

tangjin

作者

这篇“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>

效果：