带像素偏移的css绝对垂直中心答案

【问题标题】：css absolute vertical center with pixel offset带像素偏移的css绝对垂直中心
【发布时间】：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 必须携带混合模式，因为子级会失去效果。这不适用于我拥有的其余代码。

标签： html css

【解决方案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/

【讨论】：