基于父元素的高度居中自适应（移动端）

第一次接触H5微信页面，写了布局以失败告终，最后找到方法，并把关键点简化记录了下来，一个是 ：before ，一个是js。

 

html结构：

<div class="a">
     <div class="b">我要基于父元素的高度居中</di>
</div>

 

此时的场景是，div.b 的高度为20%，随着父元素的高度变化而变化，父元素的高度也是不确定的。

 

css表现：

.a{position:relative;}
.a:before{content:"";display:block;padding-top:50%;}   //让 a 的高度始终为当前宽度的一半，这个是随自己情况变化。
.b{width:20%;height:20%;position:absolute;top:50%;}    //一定要绝对定位 top：50%

 

居中方法：

var h=$('.b')[0].clientHeight;      //获取子元素的当前高度
$(".b").css("marginTop", 0 - h / 2 + "px").css("lineHeight", h + "px");        //margin-top 为负自己高度的一半

//假若子元素里面有文字也可以自适应高度

$(".b").css("marginTop", 0 - h / 2 + "px").css("lineHeight", h + "px").css("lineHeight",h+"px");

 

 

转载于:https://www.cnblogs.com/Agrass/p/6601123.html