flex的布局(一)

<div class="container">
    <div class="box">登录弹窗内容</div>
</div>

<style>
    .container {
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;

        height: 100vh;
        /* 全屏高度 */
        background: #f0f2f5;
    }

    .box {
        width: 300px;
        padding: 40px;
        background: white;
        border-radius: 8px;
        text-align: center;
    }
</style>

将padding删除

为什么用padding，而不是height?
1.内容防溢出
2.在 Flex 容器 (align-items: center) 里，子项的高度是由内容 + Padding 计算得出的,如果你不设置高度，Flex 会让盒子刚好包裹内容，并在上下留出相等的剩余空间
什么情况下才必须写 height？?
只有当盒子内部没有内容，或者需要做宽高比固定的占位图时，才必须写 height.
因为没有内容，自动高度就是0，一般用在背景图上