He visto un millón de preguntas sobre cómo centrar un elemento de bloque y parece que hay un par de formas populares de hacerlo, pero todas se basan en anchos de píxeles fijos. Entonces tambienmargin:0 auto o con posicionamiento absoluto / relativo yleft:50%; margin-left:[-1/2 width]; Todos sabemos que esto no funciona si el elemento tiene un ancho establecido en%.

¿Realmente no hay manera de hacer esto de una manera que sea verdaderamente fluida? Estoy hablando de usar% para el ancho (no configurando una docena de consultas de medios con anchos fijos cada vez más pequeños).

Cuidado: hay un montón de soluciones que utilizan la palabra de moda "responsive" perono hacer Responde a mi pregunta (porque de todos modos usan anchos fijos). Aquí estáun ejemplo.

Actualizar: Casi me olvido: ¿cómo maneja la limitación del ancho máximo del elemento centrado y aún así lo mantiene en el centro? Ver mi comentario en la respuesta de @ smdrager. Ejemplo de la vida real. Quiero que aparezca un mensaje emergente o un efecto de cuadro de luz que contenga un párrafo de texto centrado en la ventana y que el texto se ajuste de forma fluida según el ancho. Pero no quiero que el cuadro de texto se extienda demasiado demasiado lejos de donde el texto sea difícil de leer (imagine una pantalla de 4 pies con tres párrafos extendidos en una sola línea de texto). Si agrega un ancho máximo a la mayoría de los enfoques, el cuadro centrado dejará de centrarse cuando se alcance el ancho máximo.