垂直居中的列与标题flexbox

Question

我设法使用flexbox垂直对齐列内容。 但是，我还需要为列提供标题。

我怎样才能有标题，其中文本以列的宽度为中心，哪些位于列的顶部（内容必须保持垂直居中）

看我的codepen尝试： http://codepen.io/anon/pen/QNmrNx

.tothetop{
      position: absolute;
      top:0;
      text-align:center;
      background: yellow;  
    }

将标题放在顶部，但宽度与列宽不匹配，因此我无法将文本居中

Answer 1

如果我理解正确，您希望标题文本相对于列水平居中。这可能对你有帮助 -

＆＃13;

＆＃13;

header {
    display: flex;
    justify-content: center;
    width: 500px;
    margin: auto;
}     
.myView {
            margin: auto;
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            height: 500px;
            width: 500px;
        }

        .wpType {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: column;
           flex-direction: column;
           -webkit-align-items: center;
           align-items: center;
           -webkit-justify-content: center;
           justify-content: center;
            padding: 0;
            margin: 0;
            list-style: none;
            border: 1px solid silver;
        }

        .wpType:nth-child(even){
            background: blue;
        }
        .wpType:nth-child(odd){
            background: red;
        }

        .wp{
            flex: 0 1 auto;
            padding: 5px;
            width: 100px;
            height: 100px;
            margin: 10px;
            background: white;
            line-height: 100px;
            color: white;
            font-weight: bold;
            font-size: 2em;
            text-align: center;
        }

＆＃13;

<header>header</header>
<div class="myView">
    <div class="wpType">
        <div class="wp"></div>

    </div>
    <div class="wpType">
        <div class="wp"></div>
        <div class="wp"></div>
        <div class="wp"></div>
    </div>
    <div class="wpType">
        <div class="wp"></div>
        <div class="wp"></div>
        <div class="wp"></div>
    </div>
    <div class="wpType"><div class="wp"></div>
        <div class="wp"></div></div>
    <div class="wpType"><div class="wp"></div></div>

</div>

＆＃13;

＆＃13;

＆＃13;