Vi a doc sobre variáveis CSS e não sei se estou enganado, mas me pareceu ser possível fazer o que pretendo, apenas usando javascript/frameworksJS/libJS. Preciso definir a largura de um footer para auto e na linha seguinte preciso posícioná-lo no meio da tela, como não sei qual o tamanho que o footer vai ter, preciso de algo assim, left: calc(50% - valorDinamico/2)); É possível fazer só com CSS?
#footer {
position: absolute;
bottom: 0;
width: auto;
left: calc(50% - (valorDinamico/2));
}
Você pode, via javascript, alterar o estilo do elemento. Em JS puro, seria algo assim:
let valorDinamico = 10; // valor qualquer
document.getElementById("footer").style.left = "calc(50% - " + valorDinamico + ")";
Acho que é mais prático fazer a conta valorDinamico/2 antes, em vez de fazer algo assim:
document.getElementById("footer").style.left = "calc(50% - (" + valorDinamico + "/2))";
Mas aí fica a seu critério.
Usando alguma biblioteca, vai depender de como ela altera o css. Em jQuery, seria algo como:
$("#footer").css("left", "calc(50% - " + valorDinamico + ")");
Abraço.
Eu prefiro com CSS, porque tem aquele pequeno efeito de transição quando se usa JS, como se fosse um efeito proposital. Pelo jeito, só é possível com JS, é isso?
Tenho quase certeza de que é possivel só com CSS, mas para te ajudar eu precisaria entender melhor o que exatamente vc quer fazer.
Se vc puder colocar um print ou uma imagem que mostre o resultado esperado ajudaria.
De qualquer forma, no link abaixo vc pode ver uma das possiveis soluções:
https://codepen.io/wldomiciano/pen/ZEEvJzK
EDIT:
Relendo sua pergunta, acho que entendi melhor. Quando vc diz “posicioná-lo no meio da página” vc quer dizer centralizar horizontalmente, né?
Se for só isso, vc poderia fazer assim:
footer {
width: fit-content;
margin: auto;
}
Com width: fit-content
a largura será apenas tão grande quanto seu conteúdo exigir e o margin: auto
cuida de centralizar.
Mas novamente: pra ajudar melhor eu precisaria de maiores explicações como descrevi acima.