一个垂直居中布局的问题

Question

最近在学 React.js，用 v2ex 的 api 做了个页面（不过这个问题跟 React.js 无关），不过在布局的地方遇到了个问题，不知道有什么好的解决办法。

先上个 GIF 图：

首先，我的想法是点击展开之后高度是由里面内容决定的，但是不会超过窗口宽度的90%，内容高度超过的时候就显示滚动条，另外，我希望展开之后的框框是水平垂直居中的，后面的内容滚动其始终是在水平垂直居中的位置。

现在我让这个框框是

left 0
top 0
bottom 0
right 0

但是这样子我发现高度不会由里面的内容决定？

另外需要注意的一点是，加入帖子里面是有图片的，一开始图片是没有下载过来的。

关于这些需求有什么好的解决办法吗？

Answer 1

除了加这些。还需要添加margin 0 auto

或者left50%top50% translateX-50% translateY-50%

Answer 2

用fixed布局。
内部元素通过padding撑开布局，再设置下max-height的大小，对展开后的框添加css overflow-y: scroll;即可在页面超过高度时显示滚动条。