html - 带标题的垂直居中列 flexbox

Question

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

我怎样才能有标题，其中文本以列宽为中心并且位于列的顶部(内容必须保持垂直居中)

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

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

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

Answer 1

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

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;
        }

<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>