flex弹性布局（2）

1.如果要想让一个盒子向左向右都居中如下

<template>
    <div>
        <div class="container">
            <div class="list">1</div>
        </div>
    </div>
</template>

<script>
</script>

<style>
    .container {
        width: 500px;
        height: 500px;
        background-color: #007FAA;
        display: flex;
        justify-content: center; /* 左右居中*/
        align-items: center; /* 上下居中*/
        margin: 100px auto;
    }

    .list {
        width: 100px;
        height: 100px;
        background-color: #99A9BF;
    }
</style>

 

 

比如我们一个系统的登录页面就是这个样子，让登录框在我们登录页面的正中间