Flexbox布局（4）

上一篇Flexbox布局（3）

css居中问题，老生常谈。这里试着flex布局一番，看看flex居中实现起来效果如何。实现下面效果：

使用以下要点：

• display: flex ：肯定要来一个flexbox嘛。
• flex-direction: column ：竖直方向摆放子元素。
• align-items: center ：“串糖葫芦”，居中效果
• justify-content: center ：子元素之间仅仅相靠，不撑开。与Flexbox布局（3）中的content: space-between效果刚好相反。

<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
<style>
    .centered-prompt {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: 10px;
        font-family: Raleway,Helvetica,sans-serif;
    }
    .centered-prompt-item + .centered-prompt-item {
        margin-top: 5px;
    }
    .centered-prompt-icon {
        font-size: 60px;

    }
    .centered-prompt-item {
        color: #BCD2DA;
    }
    .centered-prompt-botton {
        padding: 5px 15px;
        color: #FFF;
        background-color: #4EBBE4;
        border: 1px solid #16A2D7;
        border-radius: 4px;
    }
</style>

<div class="centered-prompt">
    <div class="centered-prompt-item centered-prompt-icon">
        <div class="icon fa fa-smile-o"></div>
    </div>
    <div class="centered-prompt-item">
        <h1>welcome to the app</h1>
        thanks for signing up. let take a look around.
    </div>
    <div class="centered-prompt-item centered-prompt-botton">
        begin tour
    </div>
</div>

下一篇flexbox布局（5）