Para você utilizar calc(), você deve sempre saber o tamanho das coisas que insere, não da para colocar somente height
dentro de calc()
, que ele não irá retornar o valor para o cálculo.
Ele também deve estar com position
em absolute
, pois senão, o elemento irá ficar fora do alinhamento. Nesse exemplo, ao determinar valores para o width e height, eu trabalhei com a metade dos valores para o alinhamento:
.container {
background-color: lime;
height: 100px;
width: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
<div class="container">teste</div>
Outra opção, ao meu ver mais fácil, é utilizar o translate(-50%,-50%)
, em que você pode determinar livremente o tamanho do elemento que você quer, que ele irá fazer o alinhamento automaticamente:
.container {
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
transform: translate(-50%,-50%);
background:tomato;
}
<div class="container">teste</div>
transform: translateY(-50%)
comtop: 50%
talvez possa resolver.