I have a container that has a variable height, depending on the resolution of the computer.
I need to figure out when to use top to get content to be centralized.
I tried something like:
.container {
height: auto;
position: relative;
top: calc(((100% - height) / 2));
}
But it did not work. Does anyone know how does this type of calculation in scss?
For you to use calc () , you should always know the size of the things you insert, do not put only height within calc() , it will not return the value to the calculation.
It should also be with position in absolute , otherwise the element will stay out of alignment. In this example, when determining values for width and height, I worked with half the values for the alignment:
.container {
background-color: lime;
height: 100px;
width: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}<div class="container">teste</div> Another option, in my view, is to use translate(-50%,-50%) , where you can freely determine the size of the element you want, which it will do the alignment automatically:
.container {
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
transform: translate(-50%,-50%);
background:tomato;
}<div class="container">teste</div>To align vertically I always use:
display: block;
margin-left: auto;
margin-right: auto;
Now for you to calculate the top depending on the resolution of a monitor maybe using only a top with percentage would be enough. If not, sorry is all I know.