div的上下居中(div垂直居中)的几种CSS实现方式
2016-12-31 02:18

    最近发现好多前端写的页面的布局逻辑很差,灵活性低,代码的适应性差,无可复用性,页面对于不同分辨率的屏幕的展示存在问题。

这些低质量的页面不是js技术差的原因,也不是css属性不熟悉的后果,是对html的布局没有把握性。

   这些页面有电脑端的,也有手机端的页面,他们(大多是女性前端,女人逻辑思维比较差,别遭到妹子们的攻击了啊)写页面的时候总是盯着设计图在一个分辨率下实现了效果,然后到另一个分辨率的屏幕下就面目全非了,可能他们觉得情人眼里出西施吧,专为一个分辨率写页面。

    比如写一个百分比宽的圆形的背景上的文字上下左右居中,在iphone6下通过top,left定位实现了,然后跑到iphone4下就跑偏了,看到这样的代码,我总打心里喊一句:“姐呀,你会不会布局呀”。其他类似的种种。可能是经验少,也可能是不善于发现布局技巧,只能照搬已经有的布局模式或者百度的出来的2流答案。

    再比如下面这个效果:

    

让这个蓝色的div在这个黑色div中呈现上下居中的效果。碰到这个呢,好多妹子前端就蒙圈了,她们会用js计算出结果再进行定位,这是一些聪明的妹子,这样好歹能实现。

    其实实现这么个效果不用js,就用css的常识了解进行组合运用就可以实现了。

    我说几种实现方式,

    1.用table,在黑色div里面套一层table宽高百分百,在td里面也宽高百分百,然后用vertical-align:middle,text-align:middle就可以实现,这个好理解,也方便,不过有一些不喜欢table,觉得太老土了。那就说说第二种实现方式

    2.对于现代浏览器支持css3,我们可以这样

    

.out{text-align:center;}
.inner{display:inline-block;position:relative;top:50%;-webkit-transform:translateY(-50%);}

上面的代码就可以实现不定宽高的div上下左右居中,top:50%;是相对于父元素的,translateY是相对于元素本身的。很容易理解吧。

可能有人要喊,不兼容IE呀。是的虽然微软已经停止了IE的更新支持了,但是用户基数还在那里呢,不得不考虑呀

3.那就用个伪类换种方式解决

.out{text-align:center;white-space:nowrap;overflow:hidden;}
.out:after{content:"";height:100%;width:0;vertical-align:middle;display:inline-block;}
.inner{display:inline-block;}

好吧,兼容到IE8,可以交差了。这个也好理解,就是利用vertical-align:middle,让inner和100%高的元素居中对齐,那么他就上下居中了。

这个布局有一个注意点,就是如果inner的宽度为100%的话,需要在out上加一个white-space:nowrap;样式,这样才能保证整体内容不换行,才能再垂直方向上保持居中。这里的white-space:nowrap;是必要的,如果你的内部元素是100%宽的而没有nowrap,那么after伪类会换行到下一行,就不能起到居中对齐的作用了。(white-space:nowrap是让容器的子元素不换行的作用)。

4.用个糟糕点的方式实现:

    

<div style='width:300px;height:200px;border:1px solid black;text-align:center;margin:50px auto;position:relative;text-align:center;' >
  <div style='position:relative;display:inline-block;top:50%;'>
     <div style='display:inline-block;border:1px solid blue;position:relative;top:-50%;visibility:hidden;'>
     aaaaaaaaaaaaa<br/>bbbbbbbb
    </div>
    <div style='display:inline-block;border:1px solid blue;position:absolute;top:-50%;left:0;'>aaaaaaaaaaaaa
        <br/>bbbbbbbb
    </div>
  </div>
</div>

这个原理也比较简单:

可以看到,透明的是隐藏的div,他只top:50%;所以还差半个自己的高度值。而蓝色的是absolute定位的div,内容一样才能高度一样,他的top:-50%;就会相当一他外层的inline-block的高度进行计算。所以就可以上下居中了。

这个我本打算是使用position:relative;top:-50%;的,但是在各个浏览器上测试,这个没有任何反应,原因未知,所以只能用absolute进行定位了。

好了,就说到这里吧,要睡觉了。这几种上下居中的方式都算是一些小的布局技巧,我想上下居中的方法还有很多很多有待发现呢。

以后我总结一些布局技巧写成文章,希望可以帮到大家哦

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2979)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1