I'd like to show a big warning in the center of the screen when our backend sends back an error message. Since I don't know how long that error message can be, I do not want to be restricted by setting a static size for the div, but I want it to grow if the content within it grows.
I'd like to solve this with pure css.
Ideally, I'd use something like calc, that would say: the distance from the top is 50vh minus half of the height of the div.
Currently, my css looks like this:
.error{
float:right;
position:absolute;
width:80vw;
left:calc(10vw);
top:calc(50vh - 100px); // should be something like calc(50vh - (.error.height / 2))
}
So my question is: am I thinking in the right direction? Can I request the height of a div with calc? Is there another solution?
