渐变背景上的内容垂直居中 -- CSS/HTML -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> CSS/HTML --> 渐变背景上的内容垂直居中

渐变背景上的内容垂直居中

浏览:2276次出处信息

不同分辩率下的页面内容垂直居中，这问题在某些情况下会比较麻烦，如：内容在不一致的渐变背景之上，让其垂直居中于不固定高的页面，这效果处理不好会出现颜色不一致渐变颜色对应不上的丑陋！

要实现所有分辩率居中是比较难，只能做到符合大部分用户，我一般会做到最大不超过24寸（1920×1200）电脑显示屏幕，在例子中高度等于或小于1200px高度分辩率的情况下，不足一屏的页面内容（固定高度的内容）垂直于不同分辩率居中。

制作思路:

实现这效果就相等于，把两个BOX内容重复垂直于容器及容器内。

如等于或小于1920×1200分辨率,把页面高度1200px当作内容高度,应用于class=”warpper”。

class=”warpper”垂直于body内，而class=”content”内容则垂直于class=”warpper”内。

但制作之前最好让你的设计师提供内容在高度为1200px的效果图，注意：内容是在1200px高度的中间。

页面内容垂直居中

缺点:

觉得有点不好之处是，我把html及body的滚动条隐藏了，这样对用户体验不太好。而且屏幕高度超过1200px的话你会发现有白颜色的背景（不过以现在的用户来说这机率是非常少的）。

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

建议继续学习

近3天十大热文