介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
,,,& lt; meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
,,,& lt; title> Document
,,,& lt; style 媒体=皊creen"比;
,,,,,,,.container {
,,,,,,,,,,,位置:,相对;
,,,,,,,,,,,宽度:,50%;
,,,,,,,}
,,,,,,,.container img {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,显示:,块;
,,,,,,,,,,,身高:,汽车;
,,,,,,,}
,,,,,,,.overlay {
,,,,,,,,,,,宽度:,100%;
,,,,,,,,,,,身高:,100%;
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,左:,0;
,,,,,,,,,,,:,0;
,,,,,,,,,,,对的:,0;
,,,,,,,,,,,底部:,0;
,,,,,,,,,,,不透明度:,0;
,,,,,,,,,,,的转变:,0.5 s 缓解;
,,,,,,,,,,,背景:,rgb (0, 0, 0);
,,,,,,,}
,,,,,,,.container: hover .overlay {
,,,,,,,,,,,不透明度:,0.5;
,,,,,,,}
,,,,,,,.text {
,,,,,,,,,,,颜色:,白色;
,,,,,,,,,,,,字体大小:20 px;
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,:,50%;
,,,,,,,,,,,左:,50%;
,,,,,,,,,,,变换:,翻译(-50%,-50%);
,,,,,,,,,,,-ms-transform:,翻译(-50%,-50%);
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; h3>淡入效果& lt;/h3>
,,,& lt; div 类=癱ontainer"比;
,,,,,,,& lt; img src=https://www.yisu.com/zixun/薄?img/photo2.jpg”alt==巴枷瘛薄鞍⒎泊铩崩?
这篇“CSS中翻译实现水平垂直居中效果的方法”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS中翻译实现水平垂直居中效果的方法”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获、下面让我们一起来看看具体内容吧。
<强>翻译(-50%,-50%)属性:
向上和左,移动自身长宽的50%,使其居于中心位置。
与使用保证金实现居中不同的是,保证金必须知道自身的宽高,而翻译可以在不知道宽高的情况下进行居中,tranlate函数中的百分比是相对于自身宽高的百分比
(使用顶部和左为50%时,以窗口左上角为原点)。
<强>示例:
Hello World