我正在尝试使用古老的技术
垂直对齐div顶部:50%; 变换:翻译Y(-50%);
但它没有像我预期的那样工作。我想知道这里的问题可能是什么。
我尝试向主体添加显示柔性并添加align-content:center;但这只会让一切变得混乱。所以我尝试了上述技术,但它只是将 div 放置在屏幕的中间,没有顶部:50%;完全影响它。
这是代码:
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#mittrek {
width: 80%;
max-width: 200px;
height: 400px;
border-radius: 20px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translateY(-50%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(10px);
background-repeat: no-repeat;
display: flex;
align-content: center;
justify-content: center;
}
#mittrek::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 4px;
border-radius: 20px;
mask-composite: exclude;
z-index: 4;
overflow: hidden;
box-shadow: 0px 0px 40px 15px black;
}
<!DOCTYPE html>
<html>
<body>
<div id="mittrek"></div>
</body>
</html>
您为 mittrek 设置了错误的位置属性值。这是更新的代码。
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#mittrek {
width: 80%;
max-width: 200px;
height: 400px;
border-radius: 20px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.5);
position: absolute; // Changed relative to absolute
margin-left: auto;
margin-right: auto;
top: 50%;
left: 50%; // Added left
transform: translate(-50%, -50%); // Changed translateY to translate
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(10px);
background-repeat: no-repeat;
display: flex;
align-content: center;
justify-content: center;
}
#mittrek::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 4px;
border-radius: 20px;
mask-composite: exclude;
z-index: 4;
overflow: hidden;
box-shadow: 0px 0px 40px 15px black;
}
</style>
</head>
<body>
<div id="mittrek"></div>
</body>
</html>