⼩程序居中、居右、居底和横向、纵向布局，⽂字在图⽚中间，⽹格布局⼩程序居中、居右、横纵布局
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%);
可能会有兼容性问题
⽔平居中A：相对⽗类控件
margin:0 auto;
text-align: center;
⽔平居中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;
2、⼩程序横向布局、纵向布局横向布局
display: flex;
flex-direction: row;
纵向布局
display: flex;
flex-direction: column;
3、控件居右
⽗类控件中
position: relative;/*⽗元素位置要设置为相对*/
（第⼀种居右⽅法）⼦类控件居右显⽰position: absolute;/* 相对relative也可以 */
right:0;/* 靠右调节 */
margin-right: 35rpx
（第⼆种居右⽅法）只在⼦类控件中加⼊
position: fixed;
right:0;
（第三种居右⽅法）
float: right;
（第四种居右⽅法）⽗类控件
display:flex;
justify-content:flex-end;
⼦类控件⽔平居中显⽰
position: absolute;
right:40%;
left:40%;
⼦类控件底部显⽰⼀
position: fixed;
bottom: 20rpx;
⼦类控件底部显⽰⼆
//⽗类
position: relative;
//⼦类
position: absolute;
bottom:0;
居底的还可以看看另⼀篇⽂章：
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、⽹格布局
效果图：
wxss代码：
display: grid;
width:100%;
overflow-x: hidden;
/* 设置列、⾏⼤⼩ fr单位是等分分配列空间 4列，如果要3列，删除⼀个1fr*/ grid-template-columns:1fr 1fr 1fr 1fr;
/* grid-template-rows: 100rpx 100rpx; */
/* 有多余数据时，⾃动添加新⾏时默认⾏⾼为：200rpx */
grid-auto-rows:100rpx;
/* 设置⽹格线⼤⼩ */
/* grid-gap: 10rpx; */
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论