css3属性：justify-content

平时我们使用text-align让文字水平居中。
而如果元素采用弹性盒子布局，应使用justify-content属性进行水平居中。
示例代码一
html：

<div class="header">
    <div class="header-left">呀吼</div>
    <div class="header-middle"></div>
    <div class="header-right">Giao</div>
</div>

css：

html {
    font-size：50px;
}
body {
    margin: 0;
    font-size: .28rem;
}
div {
    display: flex;
}
.header {
    height: .88rem;
    background-color: #00bcd4;
    line-height: .88rem;
    color: #fff;
}
.header-left {
    width: .8rem;
    background-color: orange;
    justify-content: center;
}
.header-middle {
    flex: 1;
}
.header-right {
    width: 1.32rem;
    background-color: orange;
    justify-content: center;
}

示例代码二
html：

<header>
    <div class="header-left">呀吼</div>
    <div class="header-middle"></div>
    <div class="header-right">Giao</div>
</header>

css：

html {
    font-size：50px;
}
body {
    margin: 0;
    font-size: .28rem;
}
header {
    display: flex
    height: .88rem
    background-color: #00bcd4
    line-height: .88rem
    color: #fff
}
.header-left {
    width: .8rem
    background-color: orange;
    text-align: center
}
.header-middle {
    flex: 1
}
.header-right {
    width: 1.32rem
    background-color: orange;
    text-align: center
}

以上代码效果如下：