微信小程序居中、居右、橫縱布局
1、水平垂直居中（相對(duì)父類(lèi)控件）
方式一：水平垂直居中
父類(lèi)控件：

? display: flex;align-items: center;//子控件垂直居中justify-content: center;//子控件水平居中width: 100%;height: 400px

? //注意：這里的 height 寫(xiě) 100%會(huì)使得垂直居中可能會(huì)不生效

可能會(huì)有兼容問(wèn)題

方式二：水平垂直居中（方式二推薦）
父類(lèi)控件：position: relative;
子類(lèi)控件：

?? ?position: absolute;left: 0;right: 0;bottom: 0;top:0;margin: auto;

方式三：水平垂直居中（方式三推薦）
父類(lèi)控件：

?? ?display: table-cell;vertical-align: middle;

子類(lèi)控件：margin:0 auto;

方式四：水平垂直居中
父類(lèi)控件：position:relative;
子控件：

?? ?position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);

可能會(huì)有兼容性問(wèn)題

2、水平居中
水平居中A：相對(duì)父類(lèi)控件

margin: 0 auto;
text-align: center;//針對(duì)行內(nèi)元素

水平居中B、相對(duì)父類(lèi)控件–子控件絕對(duì)定位
需要知道控件的寬高，-100rpx為自身寬高（200）的一半

  width: 200rpx;height: 200rpx;position: absolute;top: 50%;left: 50%;margin-top: -100rpx;margin-left: -100rpx;

水平居中C、相對(duì)父類(lèi)控件（水平）居中
父類(lèi)：text-align:center;
子類(lèi)：display:inline/inline-block;

3、垂直居中
方式一
父級(jí)

display: flex;

子級(jí)

align-self: center;

方式二
父級(jí)

position: relative;

子級(jí)

 position: absolute;top: 50%;transform: translateY(-50%);

方式三
父級(jí)

position: relative;

子級(jí)

  position: absolute;top: 0;bottom: 0;margin: auto;

4、控件居右

（第一種居右方法）子類(lèi)控件居右顯示
父級(jí)

position: relative;

子級(jí)

position: absolute; /* 相對(duì)relative也可以 */
right: 0; /* 靠右調(diào)節(jié) */
margin-right: 35rpx

（第二種居右方法）只在子類(lèi)控件中加入
父級(jí)

position: relative;

子級(jí)

position: fixed;right: 0;

（第三種居右方法）

float: right;

（第四種居右方法）父類(lèi)控件

?display:flex;justify-content:flex-end;

（第五種居右方法）子類(lèi)控件一個(gè)居左一個(gè)居右顯示

?父類(lèi)控件：display:flex;
紅色框加上：margin-right : auto；或者紅色框加上：flex:1

5、控件居底部

方式一

//父類(lèi)
position: relative;
//子類(lèi)
position: absolute;
bottom: 0;
//left: 50%;//底部居中
//transform: translateX(-50%);//底部居中

方式二

position: fixed;
bottom: 20rpx;

方式三
第一個(gè)子級(jí)

  min-height: 100%;/* 等于第二個(gè)子級(jí)的高度 */margin-bottom: -40px;

第二個(gè)子級(jí)

height: 40px;

居底的還可以看看另一篇文章：底部購(gòu)物車(chē)

5、微信小程序橫向布局、縱向布局

橫向布局

display: flex;
flex-direction: row;

縱向布局

display: flex;
flex-direction: column;

4、文字在圖片中間

效果圖：

?

瘦身燃脂 這四個(gè)字就是在圖片的正中間代碼

wxml

<view class='container'><view class="view_1"><image class="image_1" src="../images/jiaocheng1.jpg"></image><text class="text_1">瘦身燃脂</text></view>
</view>

wxss

.view_1 {position: relative
}.image_1 {
}.text_1 {width: 100px;height: 24px; ?position: absolute;left: 0;top: 0px;right: 0;bottom: 0;margin: auto;text-align: center;
}?

5、網(wǎng)格布局

效果圖：

?

wxss代碼：

  display: grid;width: 100%;overflow-x: hidden;/* 設(shè)置列、行大小 fr單位是等分分配列空間 4列，如果要3列，刪除一個(gè)1fr*/grid-template-columns: 1fr 1fr 1fr 1fr;/* grid-template-rows: 100rpx 100rpx; *//* 有多余數(shù)據(jù)時(shí)，自動(dòng)添加新行時(shí)默認(rèn)行高為：200rpx */grid-auto-rows: 100rpx;/* 設(shè)置網(wǎng)格線(xiàn)大小 *//* grid-gap: 10rpx; */