最近发现好多前端写的页面的布局逻辑很差，灵活性低，代码的适应性差，无可复用性，页面对于不同分辨率的屏幕的展示存在问题。
这些低质量的页面不是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进行定位了。
好了，就说到这里吧，要睡觉了。这几种上下居中的方式都算是一些小的布局技巧，我想上下居中的方法还有很多很多有待发现呢。
以后我总结一些布局技巧写成文章，希望可以帮到大家哦
