Question

我有一些级联风格问题here - 当屏幕高度小于680像素时，它工作正常（绝对添加位置，因为我的客户反对他的网站的响应性），但是当它＆＃39; <div class="container">标记的大位置应该是页面中心的相对/垂直位置。

这适用于FF，Chrome，IE但不适用于Safari，我不知道如何修复它（我已经花了很多时间来解决这个问题），感谢您的建议和帮助。

结构如下：

<div class="content">
   <div class="container> 
     TEXT
   </div>
</div>

设置为元素的CSS是：

.content {
   min-height: -moz-calc(100vh - 316px);
   min-height: -webkit-calc(100vh - 316px);
   min-height: calc(100vh - 316px);
   height: 100%;
   width: 100%;
   min-width: 100%;
   position: relative;
}
.content > .container {
   position: absolute;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
   -ms-transform: : translate(-50%, -50%);
   -webkit: translate(-50%, -50%);
   -moz-transform: : translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   -webkit-transform: -webkit-translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

Answer 1

实际上它工作正常，但jquery.js.map文件丢失了，这引起了麻烦。

Safari中的垂直中心定位问题

1 个答案: