CSS大师之路 - 布局

水平垂直居中？最快的水平垂直居中方式是什么？

1. 垂直居中：Grid布局居中

<div class="g-container">
    <div class="g-box"></div>
</div>

.g-container{
    display:grid;
    place-content: center;
}

2. 巧妙运用margin居中

在flex格式化的上下文中，配置了margin:auto的元素，在通过justify-content和align-self进行自动对齐之前，任何正处于空闲的空间都会分配到该方向的margin当中去。

<div class="g-container">
    <div class="g-box"></div>
</div>

.g-container{
    display:flex;
}
.g-box{
    margin:auto;
}

3.flex-shrink 巧妙运用收缩

我们经常可能会碰到这样的布局，这时我们就需要善于巧妙的运用flex-shrink伸缩比例了。flex-shrink属性指定了flex元素的收缩规律。flex元素仅仅在默认宽度之和大于容器的时候才会发生收缩。其收缩的大小是flex-shrink的值。

<div class="g-container">
    <div class="g-real-box"></div>
    <div class="g-footer"></div>
</div>

.g-container{
    height:100vh;
    display:flex;
    flex-direction: column;
}
.g-footer{
    margin-top:auto;
    flex-shrink:0;
    height:30px;
    background:deeppink;
}