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

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

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

可能會有兼容問題

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

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

方式三：水平垂直居中（方式三推薦）
父類控件：

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

子類控件：margin:0 auto;

方式四：水平垂直居中
父類控件：position:relative;
子控件：

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

可能會有兼容性問題

2、水平居中
水平居中A：相對父類控件

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

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

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

水平居中C、相對父類控件（水平）居中
父類：text-align:center;
子類：display:inline/inline-block;

3、垂直居中
方式一
父級

display: flex;

子級

align-self: center;

方式二
父級

position: relative;

子級

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

方式三
父級

position: relative;

子級

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

4、控件居右

（第一種居右方法）子類控件居右顯示
父級

position: relative;

子級

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

（第二種居右方法）只在子類控件中加入
父級

position: relative;

子級

position: fixed;right: 0;

（第三種居右方法）

float: right;

（第四種居右方法）父類控件

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

（第五種居右方法）子類控件一個居左一個居右顯示

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

5、控件居底部

方式一

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

方式二

position: fixed;
bottom: 20rpx;

方式三
第一個子級

  min-height: 100%;/* 等于第二個子級的高度 */margin-bottom: -40px;

第二個子級

height: 40px;

居底的還可以看看另一篇文章：底部購物車

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

橫向布局

display: flex;
flex-direction: row;

縱向布局

display: flex;
flex-direction: column;

4、文字在圖片中間

效果圖：

?

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

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;/* 設置列、行大小 fr單位是等分分配列空間 4列，如果要3列，刪除一個1fr*/grid-template-columns: 1fr 1fr 1fr 1fr;/* grid-template-rows: 100rpx 100rpx; *//* 有多余數(shù)據(jù)時，自動添加新行時默認行高為：200rpx */grid-auto-rows: 100rpx;/* 設置網(wǎng)格線大小 *//* grid-gap: 10rpx; */