CSS: Maneira responsiva de centralizar um div fluido (sem largura de px) enquanto limita a largura máxima?
Eu já vi um milhão de perguntas sobre como centralizar um elemento de bloco e parece haver algumas maneiras populares de fazer isso, mas todas elas dependem de larguras de pixels fixas. Qualquer entãomargin:0 auto
ou com posicionamento absoluto / relativo eleft:50%; margin-left:[-1/2 width];
Todos nós sabemos que isso não funciona se o elemento tiver uma largura definida em%.
Existe realmente nenhuma maneira de fazer isso de uma forma que é verdadeiramente fluida? Estou falando de usar%
para largura (não definindo uma dúzia de media queries com larguras fixas cada vez menores).
Cuidado: existem várias soluções por aí que usam a palavra "responsivo", masnão faça responda minha pergunta (porque eles usam larguras fixas de qualquer maneira). Aquium exemplo.
Atualizar: Eu quase me esqueci: como você lida com a limitação da largura máxima do elemento centralizado e ainda a mantém no centro? Veja meu comentário na resposta do @ smdrager. Exemplo da vida real. Eu quero uma mensagem pop-up ou um efeito de caixa de luz contendo um parágrafo de texto para aparecer centralizado na janela e o texto para embrulhar fluidamente dependendo da largura. Mas eu não quero que a caixa de texto se estique muito longe, onde o texto ficaria difícil de ler (imagine uma tela de quatro metros com três parágrafos esticados em uma única linha de texto). Se você adicionar uma largura máxima à maioria das abordagens, a caixa centralizada interromperá a centralização quando a largura máxima for atingida.