I have created a unique table layout using divs and the flex property with Angular. Here is an example of how it looks:
<div class="tbody">
<div class="tr"
*ngFor="let ask of asks">
<div class="td centered red">{{ask.price | number: '1.8-8'}}</div>
<div class="td centered">{{ask.amount | number: '1.7-7'}}</div>
<div class="td centered">{{ask.sum | number: '1.7-7'}}</div>
</div>
<div class="tr"> this section should be aligned in the middle</div>
<div class="tr"
*ngFor="let bid of bids">
<div class="td centered green">{{bid.price | number: '1.8-8'}}</div>
<div class="td centered">{{bid.amount | number: '1.7-7'}}</div>
<div class="td centered">{{bid.sum | number: '1.7-7'}}</div>
</div>
</div>
When the table is rendered, I would like the content to be centered on the middle tr as shown above.
This layout is reminiscent of the Order Book interface on GDAX (refer to the screenshot below). The scrollbar indicates that there is more content beyond what is displayed, yet it remains centered for user convenience.
https://i.sstatic.net/QKXg1.png
If centering on the middle row is not achievable, an alternative could be to center the entire div assuming both data sets are of similar length. I have searched for solutions but have come up short. Any suggestions on how to accomplish this would be greatly appreciated.