• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > css 垂直居中的几种实现方法

css 垂直居中的几种实现方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,垂直居中等相关知识,佚名 希望在学习及工作中可以帮助到您
因为 CSS 本身并没有提供相应的 API 支持(确切来说是提供不全)。今天重新整理一下思路,说说前端在实现页面元素垂直居中的几种思路:

一、利用 position 和负边距
利用绝对定位,让元素的顶部与居中线对齐,再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明: 垂直居中

垂直居中

其实我们只要加多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%。如上图所示。这里有一个 DEMO:
垂直居中最终方案: DEMO http://demo.jb51.net/js/2011/align-middle/

这是在支付宝通用解决方案中实现的一个方案。=_,= 欢迎提供更好的方案…

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-063个比较有用的网页制作技巧
  • 2017-08-06使用css打造自定义select(非模拟)实现原理及样式
  • 2017-08-06CSS实现自适应宽度的菜单按钮效果代码
  • 2017-08-06让两个Div并排显示的多种方法
  • 2017-08-06英文强制换行css 使用css强制英文单词断行代码
  • 2017-08-06css 省略号 css3让多余的字符串消失并附加省略号的实现代码
  • 2017-08-06CSS中对RGB颜色的使用详解
  • 2017-08-06FORM 不换行的方法
  • 2017-08-06CSS3实现时间轴效果
  • 2017-08-06IE.JS解决IE兼容性问题方法汇总

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML设置超链接字体颜色和点击后的字体颜色
    • 有关opacity或RGBA设置颜色值及元素的透明值
    • 通过纯CSS样式实现DIV元素中多行文本超长自动省略号
    • CSS元素居中布局的简单方法
    • IE6,IE7下按钮(BUTTON)变宽的解决方法
    • css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
    • bootstrap3.0教程之栅格系统案例(包括栅格选项、从堆叠到水平排列、移动设备和桌面等
    • css firefox火狐浏览器下的兼容性问题
    • 让IE可以变相支持CSS3选择器
    • css及js调用方法详细汇总

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有