最近发现好多前端写的页面的布局逻辑很差,灵活性低,代码的适应性差,无可复用性,页面对于不同分辨率的屏幕的展示存在问题。
这些低质量的页面不是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.用个糟糕点的方式实现:
aaaaaaaaaaaaa
bbbbbbbb
aaaaaaaaaaaaa
bbbbbbbb
这个原理也比较简单:
可以看到,透明的是隐藏的div,他只top:50%;所以还差半个自己的高度值。而蓝色的是absolute定位的div,内容一样才能高度一样,他的top:-50%;就会相当一他外层的inline-block的高度进行计算。所以就可以上下居中了。
这个我本打算是使用position:relative;top:-50%;的,但是在各个浏览器上测试,这个没有任何反应,原因未知,所以只能用absolute进行定位了。
好了,就说到这里吧,要睡觉了。这几种上下居中的方式都算是一些小的布局技巧,我想上下居中的方法还有很多很多有待发现呢。
以后我总结一些布局技巧写成文章,希望可以帮到大家哦
如果觉得《div css纵向显示 html div的上下居中(div垂直居中)的几种CSS实现方式》对你有帮助,请点赞、收藏,并留下你的观点哦!