盒子模型水平垂直居中

不是专业的前端还要干前端的活…虽然学过css，很久没写，都忘得差不多了

这两个view已经垂直居中了，
但是随着翻页，右边没数据的时候，左边会突然塌陷：

虽然知道一定是css的问题，但却无从下手，

两个view我用了一个bigbox嵌套：
bigbox的css：

.bigbox{
		text-align: center;
	}

<view class="bigbox">
				<view class="guideul">
					<view class="guideli flexc" @click="gotonext(item)" v-for="item in qalistdata" :key="item.index">
						<view class="">
							{{item.index-theIndex+8}}、{{item.question}}
						</view>
						<view class="flexc">
							详情<image src="../../../static/guide/icon1.png" mode=""></image>
						</view>
					</view>

				</view>

				<view class="guideul">
					<view class="guideli flexc" @click="gotonext(item)" v-for="item in rightdata" :key="item.index">
						<view class="">
							{{item.index-theIndex+8}}、{{item.question}}
						</view>
						<view class="flexc">
							详情<image src="../../../static/guide/icon1.png" mode=""></image>
						</view>
					</view>

				</view>
</view>

突然想到，让两个子元素始终垂直水平居中就可以了：
修改bigbox的css：采用flex 布局

.bigbox{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

重新运行，ok了：

这里贴上参考的连接：CSS 实现盒子水平居中、垂直居中和水平垂直居中的方法