基于父元素实现水平垂直居中的方式
在进行页面布局的时候，经常会遇到某个子元素要基于父元素进行水平垂直居中，也有很多种实现的方式，在这里总结记录一下；
1.利用定位配合其他实现
我这里用小程序中写的一段代码为例： 页面结构：
<View className={styles.rHeader}>
<Image src={HEADER_IMG} className={styles.rhImg} />
<View className={styles.rhDate}>
<Text>06/</Text>
<Text>02</Text>
</View>
</View>
css初始样式：
.rHeader
width: 100%
height: 400px
.rhImg
width: 100%
height: 100%
.rhDate
width: 50%
padding: 0 20px
text-align: center
font-size: 36px
line-height: 80px
border: 1px solid red
页面展示：
现在开始利用定位的方式逐步实现：
- 给父元素设置相对定位，relative：相对于自身定位；
- 给日期块的子元素设置绝对定位，absolute,相对于离自己最近的非static定位的元素，这里就是它的父元素,设置距父元素的上、左的位置50%；
这个时候的页面效果是这样的，在这里就可以配合其他元素进行效果的实现；
配合margin实现
css代码：（注意注释）
.rHeader
position: relative
width: 100%
height: 400px
.rhImg
width: 100%
height: 100%
.rhDate
position: absolute
top: 50%
left: 50%
width: 50%
// 自身宽度的一半
margin-left: -25%
// 自身高度的一半
margin-top: -40px
box-sizing: border-box
padding: 0 20px
text-align: center
font-size: 36px
color: #fff
line-height: 80px
border: 1px solid red
效果展示：
配合css3属性transform实现
css代码：（注意注释）
.rhDate
position: absolute
top: 50%
left: 50%
// 在x轴方向左移元素宽度的一半，Y轴方向上移元素高度的一半
transform: translate(-50%, -50%)
width: 50%
// 自身宽度的一半
// margin-left: -25%
// 自身高度的一半
// margin-top: -40px
box-sizing: border-box
padding: 0 20px
text-align: center
font-size: 36px
color: #fff
line-height: 80px
border: 1px solid red
效果展示：
利用定位加margin的另一种实现方式
利用定位获得父元素的宽高，然后通过margin：auto来实现水平垂直居中 css代码：
.rhDate
position: absolute
top: 0
bottom: 0
left: 0
right: 0
margin: auto
width: 50%
height: 130px
box-sizing: border-box
padding: 0 20px
text-align: center
font-size: 40px
font-family: PingFangSC-Medium, PingFang SC
color: #fff
line-height: 110px
border-radius: 10px
background: rgba(0,0,0,0.4)
效果展示：
