当被其他弹性项目包围时，在容器中居中弹性项目 [英] Center flex item in container, when surrounded by other flex items

问题描述

我有一个 flex-box(示例见下面的代码片段).

我想设置它，以便在所有情况下，

位于 flex-box 的中心，而其他跨度将围绕它流动，基于他们的标记.

我基本上是在寻找 align-self CSS 代码，但是对于主轴，而不是横轴 (这个 可能有助于解释我在问什么.

我还将 margin: auto; 应用到我的 <h2>，这是我在阅读 这个(很棒的页面，但是，仍然给我留下了以下问题-除非我没有完全理解所有内容).

这是我得到的代码:

.container {对齐项目:居中；边框:1px纯红色；显示:弹性；对齐内容:居中；宽度:100%；}h2{保证金:自动；]

<h2>我是一个h2</h2><span>我是跨度 1</span><span>我是跨度 2</span><span>我是跨度 3</span>
<div class="容器"><span>我是跨度 1</span><span>我是跨度 2</span><span>我是跨度 3</span><h2>我是一个h2</h2><span>我是跨度 4</span><span>我是跨度 5</span><span>我是跨度 6</span>

<div class="容器"><span>我是跨度 1</span><span>我是跨度 2</span><h2>我是一个h2</h2><span>我是跨度 3</span>

<块引用>

完全重申我的问题:我想知道如何将 <h2> 在我的页面上居中，以便其他 <span> 位于，

将始终位于 flex-box 的 死区 中心.

谢谢.

附言我愿意使用 JS 和 jQuery，但更喜欢用纯 CSS 方式来实现这一点.

更新

这是@Michael_B

他的回答让我思考.虽然我还没有找到一种方法来做到这一点，但我相信以下是朝着正确方向迈出的一步:

HTML

<div><span>我是跨度 1</span><span>我是跨度 2</span><span>我是跨度 3</span>
<h2>我是一个h2</h2><div><span>我是跨度 4</span><span>我是跨度 5</span><span>我是跨度 6</span>

CSS

.container div {弹性:1 1 自动；文本对齐:居中；}h2{弹性:0 0 自动；保证金:自动；}

.container {对齐项目:居中；边框:1px纯红色；显示:弹性；对齐内容:居中；宽度:100%；}.container div {弹性:1 1 自动；文本对齐:居中；}h2{弹性:0 0 自动；保证金:自动；}

<div>
<h2>我是一个h2</h2><div><span>我是跨度 1</span><span>我是跨度 2</span><span>我是跨度 3</span>

<div class="容器"><div><span>我是跨度 1</span><span>我是跨度 2</span><span>我是跨度 3</span>