带像素偏移的css绝对垂直中心
Posted
技术标签:
【中文标题】带像素偏移的css绝对垂直中心【英文标题】：css absolute vertical center with pixel offset 【发布时间】：2019-12-03 17:54:50 【问题描述】：我有一个带有固定背景图像的页面。该页面有 3 个绝对定位的 div 设置为混合模式。在这 3 个 div 之上（对于内容），我浮动了 3 个更多相同的 div，但没有混合模式或背景颜色。我想按顺序排列这些 div，一个在顶部，一个在中间，一个在底部。 我已经尝试使用 margin-top 来抵消 div 的高度，但这会使所有东西都离顶部太远而不再看起来垂直居中。很近，但还不够近！
混合模式的问题意味着我无法设置父 div 来控制子级的位置，因为混合模式随后会丢失。我尝试使用混合模式寻找父母情况的解决方案，但似乎找不到任何可靠的东西。
有没有办法解决这个问题？
这是我的 HTML：
<img src='http://www.pptback.com/uploads/blue-world-map-backgrounds-powerpoint.jpg' alt='background' id='bg' class='noselect' />
<div class='top-bg'></div>
<div class='main-bg'></div>
<div class='foot-bg'></div>
<div class='top-content'>This is the top</div>
<div class='main-content'>This is the main content</div>
<div class='foot-content'>This is the foot</div>
这是我的 CSS：
#bg position:fixed; min-height:100%; min-width:100%; top:0; left:0;
.noselect -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
.top-bg position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-185px; background:#393939; mix-blend-mode:multiply; z-index:2;
.main-bg position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:61px; background:#515151; mix-blend-mode:multiply; z-index:2;
.foot-bg position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:306px; background:#393939; mix-blend-mode:multiply; z-index:2;
.top-content position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-185px; color:#fff; z-index:3;
.main-content position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:61px; color:#fff; z-index:3;
.foot-content position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:306px; color:#fff; z-index:3;
小提琴 https://jsfiddle.net/c0noL31w/
【问题讨论】：
问题在于具有混合模式的组：父 div 必须携带混合模式，因为子级会失去效果。这不适用于我拥有的其余代码。 【参考方案1】：想通了。 我玩弄了这些数字，并将顶部 div 的高度添加到我的第一篇文章中的负偏移量中，中间没有偏移量，底部 div 与顶部的偏移量相同，但高度为正，并且效果很好。
HTML
<html>
<head></head>
<body>
<img src='http://www.pptback.com/uploads/blue-world-map-backgrounds-powerpoint.jpg' alt='background' id='bg' class='noselect' />
<div class='top-bg'></div>
<div class='main-bg'></div>
<div class='foot-bg'></div>
<div class='top-content'>This is the top</div>
<div class='main-content'>This is the main content</div>
<div class='foot-content'>This is the foot</div>
</body>
</html>
CSS
#bg position:fixed; min-height:100%; min-width:100%; top:0; left:0;
.noselect -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
.top-bg position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-246px; background:#393939; mix-blend-mode:multiply; z-index:2;
.main-bg position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); background:#515151; mix-blend-mode:multiply; z-index:2;
.foot-bg position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:246px; background:#393939; mix-blend-mode:multiply; z-index:2;
.top-content position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:-246px; color:#fff; z-index:3;
.main-content position:absolute; width:40%; height:430px; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; z-index:3;
.foot-content position:absolute; width:40%; height:60px; top:50%; left:50%; transform:translate(-50%,-50%); margin-top:246px; color:#fff; z-index:3;
新小提琴： https://jsfiddle.net/jrox275g/
【讨论】：
以上是关于带像素偏移的css绝对垂直中心的主要内容，如果未能解决你的问题，请参考以下文章