小程序里面用的样式叫 wxss， wx 表示微信，ss 是 style sheets .. 它跟我们平时用的 css 差不多 .. 你可以把它理解成微信小程序定制版的 css ...

在小程序的有个主要的样式文件，每个页面也可以有属于自己的样式文件 .. 打开 index 页面的 wxml 文件 .. 在这个 view 组件上面，可以用一个 class ，在组件上面添加一个类 .. 名字是 container .. 这个 container 类的样式在其它页面上也应该会用到 .. 所以我们可以把它的样式定义到小程序的主样式文件里 ..

在小程序的根目录下面，创建一个样式文件 .. 名字是 app.wxss .. 小程序的主样式文件必须是这个名字 .. 添加一个 .container .. 作为样式的选择器 ..

先把组件的 box-sizing 的值设置成 border-box .. 再设置一下它的 height ，也就是高度 .. 值可以是 100vh ..

再用一个 padding ，添加一点边距 .. 值是 8px .. 然后用一个 background 属性，设置一下页面的背景 .. #f8f8f8 ...

再设置一下文字的样式，用一个 color 属性，值可以使用 rgba 来表示 .. 颜色是黑色 .. 不透明度设置成 0.85 ...

现在我想让页面上的内容水平还有垂直都居中 .. 我们可以使用 css 的 flexbox 去实现 .. 先改造一下页面的 wxml .. 在这个 view 组件上面，再添加两个类 .. vertical centered .. 然后在它里面再嵌套一个 view 组件 ..

回到小程序的主样式文件 ... 先定义一下 .centered 这个类的样式 .. 如果组件上带这个样式，我们就让它水平居中 .. 把组件的 display 的值设置成 flex ，让它变成一个 flexbox ..

flex-direction 的值设置成 column ... 然后再设置一下它里面的元素的对齐 ... 用的是 align-items ... 设置成 center ..

你会看到，现在页面上的这个元素会水平居中显示 ..

再添加一个样式选择器 .. 同时带 .vertical 还有 .centered 类的组件 .. 设置一下它的 view 这个子元素的样式 ..

把这个组件也设置城 flexbox ... display: flex ... 然后把 height 的值设置成 100vh .. 再把 flex-direction 设置成 row .. 最后再用 align-items .. 让组件居中对齐 ...

现在页面上的这个组件会水平居中，同时也会垂直居中 ..

小程序页面上共用的样式，你都可以把它放在这个 app.wxss 文件里面 .. 这样你就可以在小程序的所有的页面上使用在这个文件里定义的样式 ..

页面样式

每个页面也可以有自己单独的样式 .. 比如我们给这个 index 页面创建一个样式文件 .. 文件的名字应该就是页面的名字 .. 这里就是 index，后缀是 wxss ..

在打开页面的 wxml 文件 .. 在这个 text 组件上面，添加一个类 .. 名字是 header ... 我们把这个 header 的样式放在页面的样式文件里 ... 一个 .header ... 用一个 font-size 设置一下字号 ... 再用一个 font-family 设置一下字体 ..