I am trying to vertically align the div using the age old technique of
top: 50%;transform: translateY(-50%);
but it is not working as I expect it to. I am wondering what the problem here could be.
I tried adding display flex to the body and adding align-content: center; but that just jumbles everything. So I tried the aforementioned technique but it's just placing the div halfway up the screen without the top: 50%; affecting it at all.
Here's the code:
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>