小程序垂直居中怎么做,小程序垂直居中如何写

时间:2024-10-15 00:26:32

1、首先准备一个简单的小程序代码片段,如下图所示

小程序垂直居中怎么做,小程序垂直居中如何写

2、接着在视图文件中写一些内容,如下图所示

小程序垂直居中怎么做,小程序垂直居中如何写

3、然后可以看到默认内容是靠在左上角的,如下图所示

小程序垂直居中怎么做,小程序垂直居中如何写

4、接着我们给内容添加displayflex,align-items:center这两个属性,注意width和height也要加

小程序垂直居中怎么做,小程序垂直居中如何写

5、然后就可以看到垂直居中了,如下图所示

小程序垂直居中怎么做,小程序垂直居中如何写

6、另外在加上justify-content:center,如下图所示

小程序垂直居中怎么做,小程序垂直居中如何写

7、最后就实现了内容的垂直和水平居中,如下图所示

小程序垂直居中怎么做,小程序垂直居中如何写
© 手抄报圈