CSS Flex Box：如何在不丢失弹性项高度的情况下将“弹性项目”垂直对齐到中间？

目前我的“flex”项目看起来像这样(垂直对齐：顶部)……

_____________________________________
   1

 _____________________________________
   2

 _____________________________________
   3

 _____________________________________
   4

 _____________________________________

我的目标是使它们看起来像这样(垂直对齐：中间)……

_____________________________________

   1
 _____________________________________

   2
 _____________________________________

   3
 _____________________________________

   4
 _____________________________________

我的要求：

>柔性容器必须保持100％的高度
>弹性项目必须保持25％的高度(等于100％,无论如何这是默认值).
>弹性项目必须垂直居中.
>这必须具有响应性并且足够智能以保持每个设备的中间位置(因此没有行高/填充)

http://jsfiddle.net/oneeezy/p4XtA/

HTML

<!-- Flex Box -->
<section>

    <!-- Flex Items -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</section>

CSS

/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }

/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px solid transparent; }
div:hover { background: white; }

解决方法

要垂直对齐flexBox子项的内容,您需要应用其他一些技巧.

我相信那里会有内容,包含在标签中,然后你可以再次使用flex并设置margin中的子项：auto;
DEMO

CSS更新：

/* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;/* be a flexBox too */
}
div:first-child {
    border-top: 1px solid transparent;
}
div:hover {
    background: white;
}
p { /* or any child of flex Box used */
    margin:auto;/* here center/middle align */
}

HTML结构：

<!-- Flex Box -->
<section>
    <!-- Flex Items,Flex Box themselves -->
    <div>
        <p style="width:100%;/* to fill entire width*/">1</p> <!-- Flex Items  -->
    </div>
    <div>
        <p>2</p><!-- Flex Items  -->
    </div>
    <div>
        <p>3</p><!-- Flex Items  -->
    </div>
    <div>
        <p>4</p><!-- Flex Items  -->
    </div>
</section>

也许带显示的后备：table,可以是有用的：DEMO 2

/* fall back IE8 ie */
html,body,section {
    -moz-Box-sizing:border-Box;
    Box-sizing:border-Box;
    height:100%;
    width:100%;
}
section {
    display:table;
}
section > div {
    display:table-cell;
    vertical-align:middle;
}

/* Flex Box */
 section {
    padding: 1em;
    background: black;
    display: flex;
    flex-flow: column;
    height: 100%;
    justify-content: space-around;
}
/* Flex Items */
 section > div {
    border-top: 1px solid #ccc;
    background: #f2f2f2;
    height: 25%;
    display:flex;
}
section > div:first-child {
    border-top: 1px solid transparent;
}
section > div:hover {
    background: white;
}
p {
    margin:auto;
}

原文地址：https://www.jb51.cc/css/217932.html