CSS中的translate(-50%,-50%)實(shí)現(xiàn)水平垂直居中效果
發(fā)布時(shí)間：2020-09-02 09:27:02 作者：sai小懶 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS中的translate(-50%,-50%)實(shí)現(xiàn)水平垂直居中效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
translate(-50%,-50%) 屬性：
向上和左，移動(dòng)自身長(zhǎng)寬的 50%，使其居于中心位置。
與使用margin實(shí)現(xiàn)居中不同的是，margin必須知道自身的寬高，而translate可以在不知道寬高的情況下進(jìn)行居中，tranlate函數(shù)中的百分比是相對(duì)于自身寬高的百分比
(使用top和left為50%時(shí)，以窗口左上角為原點(diǎn))。
示例：
<!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>
效果：
到此這篇關(guān)于CSS中的translate(-50%,-50%)實(shí)現(xiàn)水平垂直居中效果的文章就介紹到這了,更多相關(guān)css translate水平垂直居中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
使用CSS實(shí)現(xiàn)盒子水平垂直居中的方法(8種)
這篇文章主要介紹了使用CSS實(shí)現(xiàn)盒子水平垂直居中的方法(8種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2020-11-11- 這篇文章主要介紹了CSS 水平居中并限定最大的寬度實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-09-14
CSS實(shí)現(xiàn)子元素div水平垂直居中的示例
這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-09-03css3 flex實(shí)現(xiàn)div內(nèi)容水平垂直居中的幾種方法
這篇文章主要介紹了css3 flex實(shí)現(xiàn)div內(nèi)容水平垂直居中的幾種方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-03-27- 這篇文章主要介紹了CSS3 不定高寬垂直水平居中的幾種方式,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起2020-03-26
CSS3實(shí)現(xiàn)水平居中、垂直居中、水平垂直居中的實(shí)例代碼
在前端面試中經(jīng)常會(huì)遇到css居中效果的實(shí)現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過實(shí)例代碼給大家講解，需要的朋友參考下吧2020-02-27
手把手教你CSS水平、垂直居中的10種方式(小結(jié))
這篇文章主要介紹了手把手教你CSS水平、垂直居中的10種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2019-11-07
如何讓子元素在父容器中水平垂直居中呢，下面我們來列舉幾種常見的方法，通過真實(shí)場(chǎng)景分析給大家詳解web前端之css水平居中代碼解析，感興趣的朋友跟隨小編一起看看吧2021-05-20
