<!--使用弹性模型-->
display: flex;
<!--
排列方向:
column 垂直方向
row 水平方向
-->
flex-direction: column;
<!--在容器内垂直居中,需作用在容器里的元素样式上-->
vertical-align: middle;
<!--使容器内的元素水平居中,需作用在容器样式上 -->
align-items: center;
<!--文字水平居中-->
text-align: center;
<!--将其设置为与容器相同高度达到垂直居中-->
line-height: 80rpx;
<!--宽高 不要用px物理像素,会在不同分辨率的机器上产生不同的效果-->
width:200rpx;
height:200rpx;
<!--距离顶部的高度 margin 顺序 上 右 下 左 (顺时针)-->
margin-top: 160rpx;
<!--内边距-->
padding-top: 10rpx;
<!--边界 (宽度 线体 颜色)-->
border: 1px solid #405f80;
<!--文字大小-->
font-size: 32rpx;
<!--bold加粗-->
font-weight: bold;
<!--字体-->
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
<!--设置圆角-->
border-radius: 5px;
<!--字体样色-->
color: #333