transform：translateY（-50％）在Safari中不工作

在Chrome中，我的代碼正常工作，並且問題完全垂直居中，但在Safari中並非如此。這是我的一些代碼。transform：translateY（-50％）在Safari中不工作

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
body { 
 
\t font-family: "Poiret One" 
 
} 
 

 
.myelement { 
 
\t top: 50%; 
 

 
\t -ms-transform: translateY(-50%); 
 
    -webkit-transform: translateY(-50%); 
 
    -moz-transform: translateY(-50%); 
 
    -o-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
\t opacity: .80; 
 
\t width: 30%; 
 
\t height: auto; 
 
\t z-index: 100; 
 
\t position: relative; 
 
} 
 

 
.fullscreen-bg { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
\t z-index: -100; 
 
} 
 

 
*, *:before, *:after { 
 
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
.cover-thing { 
 
    width: 100%; 
 
    height: 100%; 
 
\t text-align: center; 
 
\t top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>something.com</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Bootstrap Core JavaScript > 
 
    <script src="js/bootstrap.min.js"></script--> 
 
    
 
    <!--Custom JavaScript--> 
 
    <script src="js/mjberger.js"></script> 
 
    <!--JQuery--> 
 
    <script src="js/jquery.min.js"></script> 
 
    <!--<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>--> 
 
    
 
    <!--<script type="text/javascript" src="js/jkit/jquery-1.9.1.min.js"></script>--> 
 
\t <script type="text/javascript" src="js/jkit/jquery.jkit.1.2.16.min.js"></script> 
 
\t \t 
 

 
\t 
 
    <!----> 
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
<link href="https://fonts.googleapis.com/css?family=Poiret+One|Inknut+Antiqua" rel="stylesheet"> 
 
<link rel="icon" href="mtab.png"> 
 

 
</head> 
 
<body> 
 

 
<section id="myDiv" class="cover-thing first" style="overflow: hidden;"> 
 

 
<div class="fullscreen-bg" style="z-index: 100; position: absolute; padding: 0px; justify-content:center;"> 
 
\t <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" class="myelement"></img> 
 
</div> 
 

 
</section> 
 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="js/bootstrap.min.js"></script> 
 
</body> 
 
</html>

正如你可以看到它是完全集中，但在Safari不是這種情況下，圖像出現在屏幕的頂部，只有它的一半就可以看出。我試圖使用-webkit-，但那也行不通。我認爲這個問題主要是transform: translateY(-50%);。

來源

2017-08-17 M Berger

「負面翻譯」技巧旨在與絕對定位元素一起使用。一旦你使用position: absolute，你可以使用相同的transform居中放置x軸和y軸。

更改.myelement風格像這樣來解決這個問題：

.myelement { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    opacity: .80; 
    width: 30%; 
    z-index: 100; 
}

來源

2017-08-17 16:10:25

哇，太感謝你了。你已經讓我的一天先生。 –

transform：translateY（-50％）在Safari中不工作

回答

相關問題