居中任何大小的内容，仍然允许滚动

Question

是否有任何CSS技术可以将容器中的图像（或任何其他元素）居中，以便：

1. 它最初在水平和垂直方向上居中显示（也就是说，无论内容的大小如何，它的中心位于包含div的中心）;
2. 如果它溢出包含div，则可以滚动它。

如果内容总是小于容器，我可以简单地使用这个众所周知的技术：

top

这适用于适合“适合”的内容。在容器内部，但在内容开始溢出时停止工作。

或者我可以移除left，transform和-- script: use master Create table prodLines(id int , prodlines varchar(1000)) --drop table prodLines insert into prodLines values(1, 'Automotive Coatings (Read), Automotive Coatings (Write), Industrial Coatings (Read), S.P.S. (Read), Shared PL''s (Read)') insert into prodLines values(2, 'Automotive Coatings (Read), Automotive Coatings (Write), Industrial Coatings (Read), S.P.S. (Read), Shared PL''s (Read)') select * from prodLines 并让内容显示在容器的左上角，这对于非常大的内容可能很好，但是对于较小的内容来说看起来很糟糕。

那么在CSS中是否有一种方法可以使内容居中并允许滚动溢出和适合内容？

我最接近的就是这个小提琴：

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

我有点怀疑，这样做的唯一方法是在加载后检查内容是否适合。

Answer 1

Flexbox可以做到这一点

num

JSFiddle Demo