Zentrum jeder Größe Inhalt und immer noch erlauben, Scrolling

Question

Gibt es eine CSS-Technik innerhalb des Behälters ein Bild (oder ein anderes Element) zu zentrieren, so dass:

1. horizontal zentriert angezeigt wird, und vertikal anfänglich (das heißt, sein Zentrum ist in der Mitte des enthaltenden div, unabhängig von der Größe des Inhalts);
2. es kann gescrollt werden, wenn es seinen enthaltenen div überläuft.

Wenn der Inhalt immer kleiner als der Behälter ist, kann ich einfach diese bekannte Technik verwenden:

.content { 
    position: relative; 
    left: 50%; 
    top: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

Diese perfekt für den Inhalt funktioniert, dass ‚paßt‘ in seinem Behälter, aber nicht mehr funktioniert, wenn Der Inhalt beginnt zu überlaufen.

Oder ich kann die top, left und transform entfernen und den Inhalt in der oberen linken Ecke des Containers erscheinen lassen, was möglicherweise für sehr große Inhalte geeignet ist, aber für kleinere Inhalte schrecklich aussieht.

Gibt es in CSS eine Möglichkeit, Inhalte zu zentrieren und Scrollen sowohl für überlaufende als auch für angepasste Inhalte zuzulassen?

Der nächstgelegene ich gekommen bin auf dieser Geige ist:

https://jsfiddle.net/4k5vp6m6/3/

ich irgendwie den Verdacht, dass der einzige Weg, dies zu tun ist, um den Inhalt zu überprüfen nach dem Laden zu sehen, ob es passt oder nicht.

Answer 1

Flexbox tun können, dass

.container { 
    position: relative; 
    width: 500px; 
    height: 500px; 
    border: 3px solid green; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow: auto; 
} 

JSFiddle Demo