CSS中垂直居中的简单实现方法


Posted in HTML / CSS onJuly 06, 2015

大家都知道css里面用text-align:center加上margin:0 auto就可以实现水平居中了,但是垂直居中却没有相应的css属性来设置,而如果要设置元素能够垂直居中必须得将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
通过CSS3的transform来实现

CSS Code复制内容到剪贴板
  1. .center-vertical {   
  2.   positionrelative;   
  3.   top: 50%;   
  4.   transform: translateY(-50%);   
  5. }   
  6. .center-horizontal {   
  7.   positionrelative;   
  8.   left: 50%;   
  9.   transform: translateX(-50%);    
  10. }     

HTML / CSS 相关文章推荐
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
CSS3关于z-index不生效问题的解决
Feb 19 HTML / CSS
Html5移动端弹幕动画实现示例代码
Aug 27 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 #HTML / CSS
利用CSS3实现文本框的清除按钮相关的一些效果
Jun 23 #HTML / CSS
使用CSS3制作饼状旋转载入效果的实例
Jun 23 #HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 #HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 #HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
You might like
php仿discuz分页效果代码
2008/10/02 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
python设置检查点简单实现代码
2014/07/01 Python
Python程序员开发中常犯的10个错误
2014/07/07 Python
Pyhton中防止SQL注入的方法
2015/02/05 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python 常用string函数详解
2016/05/30 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Python实现全排列的打印
2018/08/18 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
使用python实现飞机大战游戏
2020/03/23 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
2014学雷锋活动心得体会
2014/03/10 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
python实现网络五子棋
2021/04/11 Python