使用CSS

Question

好吧，这似乎是一个愚蠢的问题，但我仍然无法在其他地方找到答案。我有一堆DIV，我想把最后一个（或者第一个，如果需要的话）放在屏幕中间并由其余部分包裹。理想情况下只使用CSS。

例如：

div div div div div
div div div div div
div  +-----+    div
div  | div |    div
div  +-----+    div
div div div div div
div div div div div

我已经能够使用以下内容完成此操作，但中心div位于其余部分之上，并未包裹：

position: fixed;
top: 50%;
left: 50%;
margin-top: -11em;
margin-left: -19em;

更新：这里更接近实际的HTML代码。

<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>

<div class="hero">hero image</div>

更新：由于每个链接的宽度可能会有所不同，因此某些行可能有5个链接，而某些行可能有3个，因此没有严格的网格，因此我无法订购flexbox所需的元素。从响应中，虽然我仍然不知道使用flexbot是否可以解决这个问题，但我确实能够将代码更改为以下内容，如果有帮助的话。

<div class="hero">hero image</div>
<p class="links">link1 link2 link3 link4 link5 link6 ... </p>

我想知道我是否可以将英雄div放在页面中心并让<p>元素将其内容包裹起来。