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>


 

flex弹性布局(2)_登录页面

 

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

flex弹性布局(2)_登录页面_02